<!--
* @Author: zhi1hw hanwei@zhi1tech.com
* @Date: 2024-06-18 10:32:15
 * @LastEditors: zhi1hw hanwei@zhi1tech.com
 * @LastEditTime: 2025-02-17 18:55:58
 * @FilePath: \code\src\views\home\components\assistant.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="assistant-container" :style="dynamicStyles">
    <transition name="shrink">
      <assistant-left class="assistant-left" :isTolk="props.isTolk" :bot_id="props.bot_id"
        v-show="isVisibleAssistantLeft" @listenLink="setOldSession" :selectOldWin="'234'" :state="state.checkedLang"
        :openNewWindow="openNewWindow" :isDisabled="state.isDisabled" ref="assistantLeftRef"
        :modelType="state.modelType"></assistant-left>
    </transition>
    <div class="assistant-right" v-if="!isFullWidth">
      <!-- 头部 -->
      <div class="right-head">
        <div class="session-type">

        </div>

        <div class="changeLange" :style="{ opacity: state.questionType !== 8 ? '1' : '0' }">
          <div v-if="!state.checkedLang" @click="state.questionType !== 8 ? changeLange() : ''" class="ZN">
            <div>
              <span>中文</span>
            </div>
            <div>
              <span>English</span>
            </div>
          </div>
          <div v-if="state.checkedLang" @click="changeLange" class="EN">
            <div>
              <span>中文</span>
            </div>
            <div>
              <span>English</span>
            </div>
          </div>
        </div>
        <div class="versions">至一1.0</div>


        <div class="layout-1"
          v-if="(isVisibleAssistantLeft || isVisibleRecommendPopup) && !(!isVisibleAssistantLeft && isVisibleRecommendPopup) && !(isVisibleAssistantLeft && isVisibleRecommendPopup)">
        </div>
        <div class="layout-2" v-if="!isVisibleAssistantLeft && isVisibleRecommendPopup"></div>
      </div>
      <!-- 对话主题框 -->
      <div class="content consultation-mode" :class="{
        'consultation-mode': state.showConsultation,
      }">
        <!-- 聊天框主体 -->
        <div class="consultation-container" :style="containerStyle" @scroll="handleScroll">
          <div class="greet" v-if="isVisibleRecommend">
            <!-- 欢迎文字 -->
            <!-- DeepSeeK -->
            <div class="deepseek-wecome" v-if="state.questionType === 8 && state.consultationList.length === 0">
              <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <path id="path"
                  d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                  fill-rule="nonzero" fill="#4D6BFE"></path>
              </svg>
              <span>我是小助手DeepSeek，很高兴见到你！</span>
              <p>我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~
              </p>
            </div>
            <!-- 小助手 -->
            <div class="ai-icon" v-if="state.questionType !== 8 && state.consultationList.length === 0">
              <div class="logo">
                <img :src="require('@/assets/images/robot1.png')" alt="小助手" width="48px" height="48px" />
              </div>
              <div class="con">
                <span>
                  {{
                    state.checkedLang
                      ? language.messageEN.welcomeTop
                      : language.messageZH.welcomeTop
                  }},
                  <!-- <span class="userName">{{ state.userInfo?.username }}</span>, -->
                  {{
                    state.checkedLang
                      ? language.messageEN.welcomeBtm + language.messageEN.botTitle[bot_index]
                      : language.messageZH.welcomeBtm + language.messageZH.botTitle[bot_index]
                  }}
                </span>
                <div class="con-text" v-html="state.checkedLang
                  ? language.messageEN.botDesc[bot_index]
                  : language.messageZH.botDesc[bot_index]
                  "></div>
              </div>
            </div>
            <!-- 至一热搜 -->
            <div class="recommend-box" v-if="state.questionType !== 8 && state.consultationList.length === 0">
              <div class="recommend">
                <div class="list">
                  <div class="desc">
                    <div class="robot">
                      <div class="dailyrecommendations">
                        {{ state.checkedLang
                          ? language.messageEN.bot_question[bot_index].desc
                          : language.messageZH.bot_question[bot_index].desc }}

                      </div>
                      <div v-for="(data, i) in getQuestionList()" :key="i" class="quest-list"
                        @click="isSearch ? seachQuestion(data) : ''">
                        <span :class="{ 'cursor-point': isSearch }"> {{ i + 1 }}. {{ data }}</span>
                      </div>
                    </div>
                    <div class="refresh" v-if="state.list.length > 0" @click="getQuizRecommend(1)">
                      <span class="iconfont icon-shuaxin"></span>
                      {{
                        state.checkedLang
                          ? language.messageEN.changeBatch
                          : language.messageZH.changeBatch
                      }}
                    </div>
                  </div>
                  <div class="nav-tab">
                    <div class="nav-item" :class="state.navIndex == i.dictValue ? 'active' : ''"
                      v-for="(i, index) in state.listTabItem" :key="index" @click="
                        (state.navIndex = i.dictValue), getQuizRecommend(1)
                        ">
                      <div class="item-text" v-if="!state.checkedLang">{{ i.dictLabel }}</div>
                      <div class="item-text" v-if="state.checkedLang">
                        {{
                          i.dictValue == "0"
                            ? "Compliance"
                            : i.dictValue == "1"
                              ? "Finance"
                              : i.dictValue == "2"
                                ? "SFE"
                                : "System"
                        }}
                      </div>
                    </div>
                  </div>
                  <template v-if="state.list.length > 0">
                    <div class="list-item" v-for="(item, index) in state.list" :key="index" @click="
                      clickItemQa(
                        state.checkedLang
                          ? item.quizContentEN
                          : item.quizContent,
                        4
                      )
                      ">
                      <div :class="`top-${index + 1}`">{{ index + 1 }}</div>
                      <span class="item">
                        {{
                          state.checkedLang
                            ? item.quizContentEN
                            : item.quizContent
                        }}
                      </span>
                    </div>
                  </template>
                  <template v-else>
                    <div class="text" style="color: rgba(0,0,0, 0.8)">
                      {{
                        state.checkedLang
                          ? language.messageEN.study
                          : language.messageZH.study
                      }}
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <!-- 提问内容 -->
          <div class="session-box" v-if="!isVisibleRecommend" ref="scrollContainer">
            <div v-for="(item, index) in state.consultationList" :key="index">
              <div class="item itema" v-if="item.type === 0">
                <div class="con">
                  <div class="con-text fs-16" v-html="item.text"></div>
                </div>
                <div class="img-qa" v-if="item.imgList && item.imgList.length > 0 && item.imgList[0].imgUrl">
                  <img v-for="(i, index) in item.imgList" :key="index" :src="i.imgUrl" />
                </div>
                <div class="img-qa" v-if="item.imgList && item.imgList.length > 0 && !item.imgList[0].imgUrl">
                  <img v-for="(i, index) in item.imgList" :key="index" :src="i" />
                </div>
                <div class="file-qa" v-if="item.fileList && item.fileList.length > 0">
                  <div class="uploadImg">
                    <div class="img" v-for="(i, index) in item.fileList" :key="index">
                      <!-- 文件缩略图 -->
                      <img class="img-thumbnail" src="@/assets/images/xleThumbnail.png" />
                      <!-- 文件描述 -->
                      <span class="img-info">
                        <div class="img-name">{{ i.fileName }}</div>
                        <div class="img-size">
                          <div>{{ i.fileType }}</div>
                          <div>{{ i.fileSize }}</div>
                        </div>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item itema" v-if="item.type === 2">
                <div class="con">
                  <div class="con-text fs-16">
                    <div class="voice-loader">
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item itemb" v-if="item.type === 1 || item.type === 6 || item.questionType">
                <div class="ai-icon" v-if="index !== state.consultationList.length - 1">
                  <template v-if="item.questionType !== 8">
                    <img class="avatar" src="@/assets/images/robot1.png" width="48px" height="48px" />
                    <span>{{
                      state.checkedLang
                        ? language.messageEN.appTitle
                        : language.messageZH.appTitle
                    }}</span>
                  </template>
                  <template v-else-if="item.questionType === 8">
                    <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 25px">
                      <path id="path"
                        d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                        fill-rule="nonzero" fill="#4D6BFE"></path>
                    </svg>
                    <span>DeepSeek</span>
                  </template>
                </div>

                <div class="con" v-if="index !== state.consultationList.length - 1">
                  <template v-if="state.questionType === 8 && item.reasoningContent">
                    <div class="con-text">
                      <div class="think-style" v-html="item.reasoningContent"></div>
                    </div>
                  </template>
                  <div class="con-text fs-16" v-html="item.answerContent" @click="handleClick($event)"></div>
                  <div class="features">
                    <div class="con-opt" v-if="!item.isError && !state.isDisabled && item.requestId">
                      <div class="left">
                        <img src="@/assets/images/copy.png" :data-clipboard-text="getPlainText(item.answerContent)"
                          class="copy-btn" @click="handlerCopy(item.answerContent, item.requestId)" />
                        <img src="@/assets/images/refresh.png" @click.stop="bindRefresh(item)" />
                        <img src="@/assets/images/share.png" @click="handleShare(item)" />
                        <img src="@/assets/images/readAloud.png" @click="readText(item.answerContent, item.isReading)"
                          v-if="!state.isReading" />
                        <img src="@/assets/images/canotRead.png" @click="stopReading()" v-if="state.isReading" />
                      </div>
                    </div>
                    <div class="rate" v-if="item.isShowRate && (!item.isError && !state.isDisabled && item.requestId)">
                      <div>
                        {{
                          state.checkedLang
                            ? language.messageEN.evaluation
                            : language.messageZH.evaluation
                        }}
                      </div>
                      <div class="demo-rate-block">
                        <el-rate size="large" :disabled="item.feedBackType == 99" v-model="item.feedBackScore"
                          :colors="colors" @change="(value) => onRateChange(value, item)" />
                      </div>
                      <div class="rate-submit" v-if="!item.isShowRateOpBox && item.feedBackType !== 99">
                        <div>
                          {{
                            state.checkedLang
                              ? language.messageEN.cancelAction
                              : language.messageZH.cancelAction
                          }}
                        </div>
                        <div>
                          {{
                            state.checkedLang
                              ? language.messageEN.confirm
                              : language.messageZH.confirm
                          }}
                        </div>
                      </div>
                      <div class="rate-submit active" v-if="item.isShowRateOpBox && item.feedBackType !== 99">
                        <div @click.stop="() => {
                          let data = state.consultationList
                          data.forEach((i: any, cindex: number) => {
                            if (i.requestId === item.requestId) {
                              i.feedBackType = state.cancleLikeStatus;
                              i.ratevalue = 0;
                              i.isShowRateOpBox = false;
                              i.feedBackScore = 0
                              // item.isShowRate = false;
                              if (cindex === data.length - 1) {
                                state.isShowLikePopover = false
                              }
                            }
                          });
                          state.consultationList = data
                        }
                        ">
                          {{
                            state.checkedLang
                              ? language.messageEN.cancelAction
                              : language.messageZH.cancelAction
                          }}
                        </div>
                        <div @click.stop=" showFeedBack(item.requestId, item.feedBackType == 2 ? 0 : 2,
                          item.feedBackType, state.feedBackScore)">
                          {{
                            state.checkedLang
                              ? language.messageEN.confirm
                              : language.messageZH.confirm
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="con-file" :class="item.requestId" v-if="state.printEnd &&
                    item.answerRaw &&
                    item.answerRaw.docReferencesDistinct &&
                    item.answerRaw.docReferencesDistinct.length > 0
                  ">
                    <el-collapse v-model="item.activeNames">
                      <el-collapse-item class="activeName" :title="state.checkedLang
                        ? language.messageEN.reference
                        : language.messageZH.reference" name="1">
                        <template #default>
                          <div class="file-item fs-14" :class="[citem.active ? 'active' : '']"
                            v-for="(citem, cindex) in item.answerRaw.docReferencesDistinct" :key="cindex"
                            @click="openFile(citem)">
                            <span class="iconfont icon-lianjie fs-24"></span>
                            {{ citem.docName || "" }}
                            <template v-if="citem.indexId && citem.indexId.length > 0">
                              <span v-for="ditem in citem.indexId" :key="ditem">[{{ ditem }}]</span>
                            </template>
                          </div>
                        </template>
                      </el-collapse-item>
                    </el-collapse>
                  </div>

                  <div class="con-file" v-if="state.printEnd &&
                    item.classification &&
                    item.classification.length > 0
                  ">
                    <el-collapse v-model="item.activeNames1">
                      <el-collapse-item class="activeName" :title="state.checkedLang
                        ? language.messageEN.business
                        : language.messageZH.business" name="1">
                        <template #default>
                          <div class="file-item fs-4" v-for="(citem, cindex) in item.classification" :key="cindex">
                            <div v-html="citem"></div>
                          </div>
                        </template>
                      </el-collapse-item>
                    </el-collapse>
                  </div>

                </div>
              </div>
            </div>
            <!-- 相关问题 -->
            <div class="guess-to-ask" v-if="state.guessList.length > 0 && state.printEnd && !state.isDisabled">
              <span>
                {{
                  state.checkedLang
                    ? language.messageEN.iswant
                    : language.messageZH.iswant
                }}
              </span>
              <div class="ask-list">
                <div class="list-text" @click="clickItemQa(item, 3)" v-for="(item, index) in state.guessList"
                  :key="index">
                  <div>{{ item }}</div>
                  <img src="@/assets/images/vector.png" />
                </div>
              </div>
            </div>
            <!-- 打印动效专用的桥梁 -->
            <div class="item itemb print" v-if="!state.printEnd">
              <div class="ai-icon">
                <template v-if="state.questionType !== 8">

                  <img class="avatar" src="@/assets/images/robot1.png" width="48px" height="48px" />
                  <span>{{
                    state.checkedLang
                      ? language.messageEN.appTitle
                      : language.messageZH.appTitle
                  }}</span>
                </template>
                <template v-else-if="state.questionType === 8">
                  <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 25px">
                    <path id="path"
                      d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                      fill-rule="nonzero" fill="#4D6BFE"></path>
                  </svg>
                  <span>DeepSeek</span>
                </template>
              </div>

              <div class="con">
                <div class="con-text">
                  <div class="think-style" v-html="backThinkHtm"></div>
                </div>
                <div class="con-text fs-16" v-html="backHtm"></div>
              </div>
            </div>

            <!-- 加载动画 -->
            <div class="item itemb" v-if="state.isWait">
              <div class="ai-icon">
                <template v-if="state.questionType !== 8">
                  <img class="avatar" src="@/assets/images/robot1.png" width="48px" height="48px" />
                  <span>{{
                    state.checkedLang
                      ? language.messageEN.appTitle
                      : language.messageZH.appTitle
                  }}</span>
                </template>
                <template v-else-if="state.questionType === 8">
                  <svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 25px">
                    <path id="path"
                      d="M27.501 8.46875C27.249 8.3457 27.1406 8.58008 26.9932 8.69922C26.9434 8.73828 26.9004 8.78906 26.8584 8.83398C26.4902 9.22852 26.0605 9.48633 25.5 9.45508C24.6787 9.41016 23.9785 9.66797 23.3594 10.2969C23.2275 9.52148 22.79 9.05859 22.125 8.76172C21.7764 8.60742 21.4238 8.45312 21.1807 8.11719C21.0098 7.87891 20.9639 7.61328 20.8779 7.35156C20.8242 7.19336 20.7695 7.03125 20.5879 7.00391C20.3906 6.97266 20.3135 7.13867 20.2363 7.27734C19.9258 7.84375 19.8066 8.46875 19.8174 9.10156C19.8447 10.5234 20.4453 11.6562 21.6367 12.4629C21.7725 12.5547 21.8076 12.6484 21.7646 12.7832C21.6836 13.0605 21.5869 13.3301 21.501 13.6074C21.4473 13.7852 21.3662 13.8242 21.1768 13.7461C20.5225 13.4727 19.957 13.0684 19.458 12.5781C18.6104 11.7578 17.8438 10.8516 16.8877 10.1426C16.6631 9.97656 16.4395 9.82227 16.207 9.67578C15.2314 8.72656 16.335 7.94727 16.5898 7.85547C16.8574 7.75977 16.6826 7.42773 15.8193 7.43164C14.957 7.43555 14.167 7.72461 13.1611 8.10938C13.0137 8.16797 12.8594 8.21094 12.7002 8.24414C11.7871 8.07227 10.8389 8.0332 9.84766 8.14453C7.98242 8.35352 6.49219 9.23633 5.39648 10.7441C4.08105 12.5547 3.77148 14.6133 4.15039 16.7617C4.54883 19.0234 5.70215 20.8984 7.47559 22.3633C9.31348 23.8809 11.4307 24.625 13.8457 24.4824C15.3125 24.3984 16.9463 24.2012 18.7881 22.6406C19.2529 22.8711 19.7402 22.9629 20.5498 23.0332C21.1729 23.0918 21.7725 23.002 22.2373 22.9062C22.9648 22.752 22.9141 22.0781 22.6514 21.9531C20.5186 20.959 20.9863 21.3633 20.5605 21.0371C21.6445 19.752 23.2783 18.418 23.917 14.0977C23.9668 13.7539 23.9238 13.5391 23.917 13.2598C23.9131 13.0918 23.9512 13.0254 24.1445 13.0059C24.6787 12.9453 25.1973 12.7988 25.6738 12.5352C27.0557 11.7793 27.6123 10.5391 27.7441 9.05078C27.7637 8.82422 27.7402 8.58789 27.501 8.46875ZM15.46 21.8613C13.3926 20.2344 12.3906 19.6992 11.9766 19.7227C11.5898 19.7441 11.6592 20.1875 11.7441 20.4766C11.833 20.7617 11.9492 20.959 12.1123 21.209C12.2246 21.375 12.3018 21.623 12 21.8066C11.334 22.2207 10.1768 21.668 10.1221 21.6406C8.77539 20.8477 7.64941 19.7988 6.85547 18.3652C6.08984 16.9844 5.64453 15.5039 5.57129 13.9238C5.55176 13.541 5.66406 13.4062 6.04297 13.3379C6.54199 13.2461 7.05762 13.2266 7.55664 13.2988C9.66602 13.6074 11.4619 14.5527 12.9668 16.0469C13.8262 16.9004 14.4766 17.918 15.1465 18.9121C15.8584 19.9688 16.625 20.9746 17.6006 21.7988C17.9443 22.0879 18.2197 22.3086 18.4824 22.4707C17.6895 22.5586 16.3652 22.5781 15.46 21.8613ZM16.4502 15.4805C16.4502 15.3105 16.5859 15.1758 16.7568 15.1758C16.7949 15.1758 16.8301 15.1836 16.8613 15.1953C16.9033 15.2109 16.9424 15.2344 16.9727 15.2695C17.0273 15.3223 17.0586 15.4004 17.0586 15.4805C17.0586 15.6504 16.9229 15.7852 16.7529 15.7852C16.582 15.7852 16.4502 15.6504 16.4502 15.4805ZM19.5273 17.0625C19.3301 17.1426 19.1328 17.2129 18.9434 17.2207C18.6494 17.2344 18.3281 17.1152 18.1533 16.9688C17.8828 16.7422 17.6895 16.6152 17.6074 16.2168C17.5732 16.0469 17.5928 15.7852 17.623 15.6348C17.6934 15.3105 17.6152 15.1035 17.3877 14.9141C17.2012 14.7598 16.9658 14.7188 16.7061 14.7188C16.6094 14.7188 16.5205 14.6758 16.4541 14.6406C16.3457 14.5859 16.2568 14.4512 16.3418 14.2852C16.3691 14.2324 16.501 14.1016 16.5322 14.0781C16.8838 13.877 17.29 13.9434 17.666 14.0938C18.0146 14.2363 18.2773 14.498 18.6562 14.8672C19.0439 15.3145 19.1133 15.4395 19.334 15.7734C19.5078 16.0371 19.667 16.3066 19.7754 16.6152C19.8408 16.8066 19.7559 16.9648 19.5273 17.0625Z"
                      fill-rule="nonzero" fill="#4D6BFE"></path>
                  </svg>
                  <span>DeepSeek</span>
                </template>
              </div>
              <div class="con loading-mask">
                <div class="load-15">
                  <div class="k-loader k-circle"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部部分 -->
      <div class="assistant-footer" @click.stop>
        <!-- 文件预览 -->
        <div class="img-preview" v-if="state.imgList && state.imgList.length > 0 && !state.isDisabled">
          <div class="uploadImg">
            <div class="img" v-for="(item, index) in state.imgList" :key="index">
              <!-- 文件缩略图 -->
              <img class="img-thumbnail" :src="item.imgUrl" />
              <!-- 文件描述 -->
              <span class="img-info">
                <div class="img-name">{{ item.imgName }}</div>
                <div class="img-size">
                  <div>{{ item.imgType }}</div>
                  <div>{{ item.imgSize }}</div>
                </div>
              </span>
              <!-- 删除文件 -->
              <div class="closeImg">
                <img src="@/assets/images/fileClose.png" @click="() => {
                  state.imgList.splice(index, 1);
                }" />
              </div>
            </div>
          </div>
        </div>
        <div class="img-preview" v-if="state.fileList && state.fileList.length > 0 && !state.isDisabled">
          <div class="uploadImg">
            <div class="img" v-for="(item, index) in state.fileList" :key="index">
              <!-- 文件缩略图 -->
              <img class="img-thumbnail" src="@/assets/images/xleThumbnail.png" />
              <!-- 文件描述 -->
              <span class="img-info">
                <div class="img-name">{{ item.fileName }}</div>
                <div class="img-size">
                  <div>{{ item.fileType }}</div>
                  <div>{{ item.fileSize }}</div>
                </div>
              </span>
              <!-- 删除文件 -->
              <div class="closeImg">
                <img src="@/assets/images/fileClose.png" @click="() => {
                  state.fileList.splice(index, 1);
                }" />
              </div>
            </div>
          </div>
        </div>
        <!-- 操作区域 -->
        <div class="option-area">
          <div @click.stop="state.showArea = !state.showArea">
            <img src="@/assets/images/upload.png" class="other-opt" />
          </div>
          <div class="input-box">
            <div>

              <el-input id="textarea-box" v-model="state.sendText" :placeholder="state.checkedLang
                ? language.messageEN.placeholderArr[bot_index]
                : language.messageZH.placeholderArr[bot_index]" type="textarea" :rows="state.inputFieldFocus ? 4 : 1"
                :autosize="{ maxRows: 3 }" :disabled="state.isDisabled" @blur="getFooterHeight"
                @focus="state.inputFieldFocus = true" @keydown.enter.prevent="handleKeyDown"
                :class="!state.inputFieldFocus ? 'textareaellipsis' : ''" ref="input" resize="none"
                v-if="!state.isShowVoiceInput"></el-input>
              <!-- <soundRecording @addVoiceItem="addVoiceItem" @bindChangeKeyword="bindChangeKeyword"
              :stateSound="state.checkedLang" ref="soundRecordingRef" v-else />-->
            </div>
          </div>
          <div>

            <span v-if="!state.fileLoading && (state.sendText || state.sendHidenText)">
              <img class="other-yuyin type2" v-if="state.isDisabled" src="@/assets/images/stop.png"
                @click="stopReceiveData(3)" />
              <img class="other-yuyin type2" v-if="!state.isDisabled" src="@/assets/images/enter.png" @click="sendQa" />
            </span>
            <span v-else>
              <img class="other-yuyin type1" v-if="!state.isDisabled" src="@/assets/images/canNotEnter.png" />
            </span>
          </div>
          <!-- 文件上传 -->
          <div class="fileUpload" v-if="state.showArea">
            <div class="select" v-loading="state.fileLoading">
              <el-upload action="#" @mouseenter="isVisibleTips = true" @mouseleave="isVisibleTips = false"
                :show-file-list="false" accept=".pdf,.doc,.docx,.xls,.xlsx" :before-upload="fileBeforeUpload"
                :multiple="false">
                <img src="@/assets/images/document.png" />
                <span>
                  {{
                    state.checkedLang
                      ? language.messageEN.uploadDocument
                      : language.messageZH.uploadDocument
                  }}
                </span>
              </el-upload>
              <el-upload v-if="state.questionType !== 8" action="#" :show-file-list="false" accept="image/*"
                :before-upload="beforeUpload" :limit="1">
                <img src="@/assets/images/picture.png" />
                <span>
                  {{
                    state.checkedLang
                      ? language.messageEN.uploadImage
                      : language.messageZH.uploadImage
                  }}
                </span>
              </el-upload>
            </div>
            <div class="tips" v-show="isVisibleTips">
              <img src="@/assets/images/Union.png" />
              <p v-if="state.questionType !== 8">
                {{
                  state.checkedLang
                    ? language.messageEN.maxUploadFiles
                    : language.messageZH.maxUploadFiles
                }}
              </p>
              <p v-else>
                {{
                  state.checkedLang
                    ? language.messageEN.maxUploadFiles1
                    : language.messageZH.maxUploadFiles1
                }}
              </p>
            </div>
          </div>
          <!-- 至一热搜小图标RecommendIcon -->
          <div class="recommendIcon" v-if="isVisibleRecommendIcon && state.questionType !== 8">

            <span @click="toggleVisibility(1)">
              {{
                state.checkedLang
                  ? language.messageEN.discover
                  : language.messageZH.discover
              }}
            </span>
          </div>
        </div>
        <div class="assistant-footer-box" v-if="state.questionType === 8">
          <div class="sen" :class="state.isSk ? 'sen-active' : ''" @click="() => {
            state.isSk = !state.isSk;
          }
          ">
            <img :src="state.isSk
              ? require('@/assets/images/sk-a.png')
              : require('@/assets/images/sk.png')
              " style="width: 20px" alt="" />
            深度思考
          </div>
        </div>
      </div>

      <div class="warn">
        {{ ver }}
      </div>

      <!-- 反馈-popup-->
      <el-dialog v-model="state.showFeedBack" width="40%" :style="{ padding: '12px' }" title>
        <div class="feedback-box">
          <div class="title">
            <div class="title-left">
              {{
                state.checkedLang
                  ? language.messageEN.feed
                  : language.messageZH.feed
              }}
            </div>
          </div>
          <div class="feedback-content">
            <el-checkbox-group v-model="state.feedBackChecked" ref="checkboxGroup">
              <el-checkbox :label="i.dictLabel" v-for="i in state.feedBackSelect" :key="i.dictCode">{{ i.dictLabel
              }}</el-checkbox>
            </el-checkbox-group>

            <el-input v-model="state.feedBackText" type="textarea" class="feedback-textarea"
              :placeholder="state.checkedLang ? language.messageEN.feedContent : language.messageZH.feedContent"
              :rows="8" />
            <div class="sub">
              <el-button round type="primary" @click="handlerCancleLike">
                {{
                  state.checkedLang
                    ? language.messageEN.submit
                    : language.messageZH.submit
                }}
              </el-button>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 分享 -->
      <!-- <van-share-sheet v-model:show="state.showShare" :options="options" @select="(e) => toShare(e)" /> -->
      <!-- <van-overlay :show="state.isShowSharingGuidance" @click="state.isShowSharingGuidance = false" z-index="102">
        <img src="@/assets/images/SharingGuidance.png" alt="" style="width: 70%; padding: 0 16px; float: right" />
      </van-overlay>-->
      <div class="fold">
        <img src="@/assets/images/fold.png" alt="折叠按钮" @click="isVisibleAssistantLeft = !isVisibleAssistantLeft"
          :class="!isVisibleAssistantLeft ? 'active' : ''" />
      </div>
    </div>
    <div v-else style="margin:  0 auto;">
      <!-- 合同对比 -->
      <squareend v-if="bot_index===1" :data="squareData"></squareend>
      <polling v-if="bot_index===7" ></polling>
    </div>
    <!-- 至一热搜右侧再展开 -->
    <div class="assistant-popup" v-show="isVisibleRecommendPopup" v-if="!isFullWidth">
      <div class="recommend-box">
        <div class="recommend">
          <div class="list">
            <div class="desc">
              <div class="robot">
                <div class="dailyrecommendations">
                  {{ state.checkedLang
                    ? language.messageEN.bot_question[bot_index].desc
                    : language.messageZH.bot_question[bot_index].desc }}

                </div>
                <div v-for="(data, i) in getQuestionList()" :key="i" class="quest-list"
                  @click="isSearch ? seachQuestion(data) : ''">
                  <span :class="{ 'cursor-point': isSearch }"> {{ i + 1 }}. {{ data }}</span>
                </div>
              </div>
              <div class="right">
                <div class="close" @click="toggleVisibility(1)">
                  <img src="@/assets/images/recommendClose.png" alt="关闭" />
                </div>
                <div class="refresh" v-if="state.list.length > 0" @click="getQuizRecommend(1)">
                  <span class="iconfont icon-shuaxin"></span>
                  {{
                    state.checkedLang
                      ? language.messageEN.changeBatch
                      : language.messageZH.changeBatch
                  }}
                </div>
              </div>
            </div>
            <div class="nav-tab">
              <div class="nav-item" :class="state.navIndex == i.dictValue ? 'active' : ''"
                v-for="(i, index) in state.listTabItem" :key="index"
                @click="(state.navIndex = i.dictValue), getQuizRecommend(1)">
                <div class="item-text" v-if="!state.checkedLang">{{ i.dictLabel }}</div>
                <div class="item-text" v-if="state.checkedLang">
                  {{
                    i.dictValue == "0"
                      ? "Compliance"
                      : i.dictValue == "1"
                        ? "Finance"
                        : i.dictValue == "2"
                          ? "SFE"
                          : "System"
                  }}
                </div>
              </div>
            </div>
            <template v-if="state.list.length > 0">
              <div class="list-item" v-for="(item, index) in state.list" :key="index" @click="
                isForbidden() ? '' :
                  clickItemQa(
                    state.checkedLang
                      ? item.quizContentEN
                      : item.quizContent,
                    4
                  )
                ">
                <div :class="`top-${index + 1}`">{{ index + 1 }}</div>
                <span class="item">
                  {{
                    state.checkedLang
                      ? item.quizContentEN
                      : item.quizContent
                  }}
                </span>
              </div>
            </template>
            <template v-else>
              <div class="text" style="color: rgba(0, 0, 0, 0.8)">
                {{
                  state.checkedLang
                    ? language.messageEN.study
                    : language.messageZH.study
                }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ComponentInternalInstance,
  getCurrentInstance,
  reactive,
  watch,
  defineProps,
  ref,
  computed,
  defineEmits,
  onUpdated,
  inject,
  onMounted,
  onUnmounted,
} from "vue";
import VoiceAnnouncementsInstance from "@/utils/VoiceAnnouncements";
import soundRecording from "../../common/soundRecording.vue";
import moment from "moment";
import Clipboard from "clipboard";
import { marked } from "marked";
import language from "@/lang/zh";
import { get } from "lodash";
import assistantLeft from "./assistant-left.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import squareend from "@/views/squareend.vue"
import polling from "@/views/polling.vue"
// 获取当前主题
const themeColor: any = inject("themeColor");
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface IState {
  list: Array<any>;
  showArea: boolean;
  sendText: string;
  showConsultation: boolean;
  contentPadding: number;
  printBackHtml: string;
  backHtml: string;
  consultationList: Array<any>;
  printEnd: boolean;
  printAllHtml: any;
  isDisabled: boolean;
  isWait: boolean;
  messages: any;
  sendHidenText: string;
  userScrolled: boolean;
  userInfo: any;
  sessionId?: string;
  isShowReco?: boolean;
  abortController?: any;
  isNewWindow?: boolean;
  showPopover?: boolean;
  isPrintNow?: boolean;
  eventSource?: any;
  quizClassification?: any;
  currentIndex: number;
  answerObj?: null;
  moduleType?: string;
  isPopverClose?: boolean;
  activeNames?: any;
  activeNames1?: any;
  homeInfo?: any;
  floatBottom?: number;
  isSoundRecording?: boolean;
  classiFicationData?: any;
  guessList: any;
  inputFieldFocus?: boolean;
  isShowSoundRecording?: boolean;
  feedBackSelect?: any;
  showFeedBack: boolean;
  isShowVoiceInput: boolean;
  feedBackChecked?: Array<string>;
  feedBackText?: any;
  cancleLikeID?: any;
  cancleLikeStatus?: any;
  showShare?: boolean;
  shareItem?: any;
  actionStop?: boolean;
  isYouKnown?: boolean;
  questionType?: number;
  isShowSharingGuidance?: boolean;
  isShowLikePopover?: boolean;
  listTabItem?: any;
  navIndex?: number;
  feedBackScore?: number;
  checkedLang?: boolean;
  weekdays?: any;
  isReading?: boolean;
  imgList: any;
  fileList: any;
  controller?: any;
  modelType: boolean;
  isSk?: boolean;
  printThinkAllHtml: string;
  printThinkBackHtml?: string;
  currentIndexThink: number;
  timeoutDuration?: number;
  fileLoading?: boolean
}

const state: IState = reactive({
  navIndex: 0,
  listTabItem: [],
  isShowSharingGuidance: false,
  isShowLikePopover: false,
  isYouKnown: false,
  questionType: 1,
  shareItem: null,
  showShare: false,
  cancleLikeID: null,
  cancleLikeStatus: null,
  feedBackChecked: [],
  feedBackText: "",
  isShowVoiceInput: false,
  showFeedBack: false,
  feedBackSelect: [],
  inputFieldFocus: false,
  isShowSoundRecording: false,
  guessList: [],
  moduleType: "咨询政策",
  floatBottom: 0,
  activeNames: [""],
  activeNames1: ["1"],
  currentIndex: 0,
  sendText: "",
  classiFicationData: "",
  showArea: false, // 是否显示选择区域
  isPopverClose: true, // 是否可以关闭至一热搜
  isShowReco: false,
  isNewWindow: false,
  showPopover: true,
  isPrintNow: false,
  list: [],
  userInfo: null,
  eventSource: null,
  quizClassification: null,
  showConsultation: false,
  contentPadding: 0,
  consultationList: [],
  printEnd: true,
  printBackHtml: "",
  printAllHtml: "",
  isDisabled: false,
  backHtml: ``,
  isWait: false,
  messages: [],
  sendHidenText: "",
  userScrolled: false,
  abortController: new AbortController(),
  answerObj: null,
  homeInfo: null,
  isSoundRecording: false,
  actionStop: false,
  feedBackScore: 0,
  checkedLang: false,
  weekdays: [],
  isReading: false, //是否正在朗读
  imgList: [],
  fileList: [],
  controller: null,
  modelType: false,
  isSk: false,
  printThinkAllHtml: "",
  printThinkBackHtml: "",
  currentIndexThink: 0,
  timeoutDuration: 12000,
  fileLoading: false

});


const ver = process.env.VUE_APP_VERSION;
const scrollContainer = ref<any>(null);
const characterPopupRef = ref<any>(null);
const input = ref<any>(null);
const popovercon = ref<any>(null);
const checked = ref([]);
const checkboxGroup = ref(null);
const soundRecordingRef = ref<any>(null);
let timeoutHandle: any = null;

state.weekdays = state.checkedLang

  ? [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ]
  : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
const options = [
  { name: "微信", icon: "wechat", type: 2 },
  { name: "企业微信", icon: require("../../../assets/images/qi.png"), type: 1 },
];

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.shiftKey && event.key === 'Enter') {
    event.preventDefault(); // 阻止默认的 Enter 行为
    state.sendText += '\n'; // 插入换行符
  } else {
    sendQa();
  }
}

// 文件数据重构
const getFileDetails = (item: any) => {
  return new Promise((resolve) => {
    if (item.resourceFile && item.fileId) {
      let urls = item.resourceFile.split(",");
      let ids = item.fileId.split(",");
      let docList: any = [];
      for (let i = 0; i < urls.length; i++) {
        const url = urls[i];
        fetch(url, {
          method: "HEAD", // 只获取文件头部信息
        })
          .then((response) => {
            // 获取文件大小（Content-Length header）
            const fileSize = response.headers.get("Content-Length");
            // 从 URL 中提取文件名
            const fileName = url.substring(url.lastIndexOf("/") + 1);
            docList.push({
              fileName: fileName.includes('_') ? fileName.substring(0, fileName.lastIndexOf('_')) : fileName,
              // file_size: formatFileSize(Number(fileSize)),
              fileUrl: url,
              fileId: ids[i],
              fileType: fileName.split('.').pop().toLowerCase(),//文档类型
            });
            if (docList.length === urls.length) {
              resolve(docList)
            }
          })
          .catch((error) => {
            console.error("无法获取文件信息", error);
          });
      }
    }
  });
};

// 格式化文件大小
const formatFileSize = (size: number) => {
  if (size < 1024) {
    return `${size}B`;
  } else if (size < 1024 * 1024) {
    return `${(size / 1024).toFixed(2)}KB`;
  } else if (size < 1024 * 1024 * 1024) {
    return `${(size / (1024 * 1024)).toFixed(2)}MB`;
  } else {
    return `${(size / (1024 * 1024 * 1024)).toFixed(2)}GB`;
  }
};

// 回答方式切换反馈
const typeFeedback = (questionType: number) => {
  if (questionType === 4 || questionType === 1) {
    return state.checkedLang
      ? language.messageEN.knowledgeQnA
      : language.messageZH.knowledgeQnA;
  } else if (questionType === 6) {
    return state.checkedLang
      ? language.messageEN.imageQA
      : language.messageZH.imageQA;
  } else if (questionType === 7) {
    return state.checkedLang
      ? language.messageEN.fileQA
      : language.messageZH.fileQA;
  } else return "";
};

// 回答问题时禁止点击
const isForbidden = () => {
  if (state.isDisabled) {
    ElMessage.warning("请先结束回答");
    return true;
  } else {
    return false;
  }
};

// 文档上传
const fileBeforeUpload = (file: any) => {
  if (state.questionType !== 8 && state.fileList.length >= 5) {
    ElMessage.error("最多只能上传5个文件");
    return false;
  }
  // if (state.questionType === 8 && state.fileList.length == 1) {
  //   ElMessage.error("最多只能上传1个文件");
  //   return false;
  // }
  if (/,/.test(file.name)) {
    ElMessage.error("上传失败,文件名中不能包含',''");
    return false;
  }
  // 文件上传地址
  const url = process.env.VUE_APP_BASE_API_URL + "/wechatApi/getAliFileId";

  // 在这里可以对文件大小进行限制
  const maxSize = 20 * 1024 * 1024; // 2.5MB
  if (file.size > maxSize) {
    ElMessage.error("文件大小不能超过 " + formatFileSize(maxSize) + "!");
    return false; // 阻止文件上传
  }
  // 构造表单数据
  const formData = new FormData();
  formData.append("files", file);
  formData.append("isDeepSeek", state.questionType === 8);
  state.fileLoading = true;
  // 发起上传请求
  proxy?.$api
    .post(url, formData, {
      Headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res: any) => {
      if (res.code === 200) {
        let uploadedFile = {
          fileUrl: res.data[0].url, // 上传后的文件 URL
          fileName: file.name.substring(0, file.name.lastIndexOf('.')), // 文件名
          fileSize: formatFileSize(file.size), // 文件大小
          fileType: file.name.split('.').pop().toLowerCase(),//文档类型
        };
        if (res.data[0].file_id && state.questionType !== 8) {
          uploadedFile.fileId = res.data[0].file_id
        }
        // 上传成功，设置文件列表
        if (state.questionType === 8) {
          state.fileList = [uploadedFile]
        } else {
          state.fileList.push(uploadedFile);
        }
        state.showArea = false;
        state.fileLoading = false;
        return false;
      } else {
        // 上传失败，提示错误信息
        ElMessage.error("上传失败" + res.message);
        state.fileLoading = false;
        return false;
      }
    })
    .catch((error: any) => {
      console.error("上传失败:", error);
      alert("上传失败，请重试！");
      state.fileLoading = false;
      return false;
    });
};

// 图片上传
const beforeUpload = (file: any) => {
  // 文件上传地址
  const url = process.env.VUE_APP_BASE_API_URL + "/wechatApi/fileUpload";
  // 在这里可以对文件大小进行限制
  const maxSize = 2.5 * 1024 * 1024; // 2.5MB
  if (file.size > maxSize) {
    ElMessage.error("文件大小不能超过 2.5MB!");
    return false; // 阻止文件上传
  }

  // 构造表单数据
  const formData = new FormData();
  formData.append("file", file);
  state.fileLoading = true;
  // 发起上传请求
  proxy?.$api
    .post(url, formData, {
      Headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res: any) => {
      if (res.code === 200) {
        const uploadedFile = {
          imgUrl: res.fileUrl, // 上传后的文件 URL
          imgName: file.name.substring(0, file.name.lastIndexOf('.')), // 文件名
          imgSize: formatFileSize(file.size), // 文件大小
          imgType: file.name.split('.').pop().toLowerCase(),//文档类型
        };
        // 上传成功，设置文件列表
        state.imgList = [uploadedFile];
        state.showArea = false;
        state.fileLoading = false;
        return false;
      } else {
        // 上传失败，提示错误信息
        ElMessage.error("上传失败" + res.message);
        return false;
      }
    })
    .catch((error: any) => {
      console.error("上传失败:", error);
      state.fileLoading = false;
      alert("上传失败，请重试！");
      return false;
    });
};

// 调整聊天框高度
const containerStyle = computed(() => ({
  height: state.imgList.length > 0 || state.fileList.length > 0 && !state.isDisabled ? "53.9294vh" : "64.009vh",
}));

const onClickCloseIcon = () => {
  state.feedBackScore = 0;
  let data = state.consultationList;
  data.forEach((i: any) => {
    if (i.requestId === state.cancleLikeID) {
      i.ratevalue = 0;
    }
  });
  state.consultationList = data;
};
const onRateChange = (value: any, item: any) => {
  state.feedBackScore = value;
  let data = state.consultationList;
  data.forEach((i: any, cindex: number) => {
    if (i.requestId === item.requestId) {
      i.isShowRateOpBox = true;
    }
  });
  state.consultationList = data;
};

const getPlainText = (htmlContent: string) => {
  // 创建一个新的DOM解析器
  var parser = new DOMParser();
  // 使用解析器解析HTML内容，并获取文档对象
  var doc = parser.parseFromString(htmlContent, "text/html");
  // 创建一个文本节点的范围
  var range = doc.createRange();
  // 选择文档中的所有节点
  range.selectNodeContents(doc.body);
  // 使用范围提取文本内容
  return range.toString();
};
const handleClick = (event: any) => {
  const target = event.target;
  if (target.matches(".phone-tips")) {
    let list = state.consultationList;
    list.forEach((item: any) => {
      if (item.requestId && item.requestId === target.getAttribute("data-id")) {
        item.activeNames1 = ["1"];
      }
    });
    state.consultationList = list;
  }
  if (target.matches(".doc-tips")) {
    const position = target.getAttribute("data-position");
    if (position) {
      scrollToPosition(position);
    }
  }
};
// 朗读
const readText = (text: string, isReading: boolean) => {
  if ("speechSynthesis" in window) {
    console.log("浏览器支持语音合成");
  } else {
    alert("浏览器不支持语音合成");
  }
  text = text.replace(/<.*?>/g, "");
  if (text) {
    const utterance = new SpeechSynthesisUtterance(text); // 创建语音合成实例
    if (state.checkedLang)
      utterance.lang = "en-US"; // 设置语言为中文（可以根据需要选择语言）
    else utterance.lang = "zh-CN";
    utterance.pitch = 1; // 设置语调
    utterance.rate = 1; // 设置语速
    utterance.addEventListener("end", onReadEnd);
    speechSynthesis.speak(utterance); // 播放语音
    state.isReading = true;
  }
};
const onReadEnd = () => {
  state.isReading = false;
};

// 停止朗读
const stopReading = () => {
  if (speechSynthesis.speaking) {
    speechSynthesis.cancel();
    state.isReading = false;
  }
};

// 暂停朗读
const pauseReading = () => {
  if (speechSynthesis.speaking) {
    speechSynthesis.pause();
  }
};

// 继续朗读
const resumeReading = () => {
  if (speechSynthesis.paused) {
    speechSynthesis.resume();
  }
};

// 评分
const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]); // same as { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
// 显示小贴士
const isVisibleTips = ref(false);

// 主体左侧显示与隐藏
const isVisibleAssistantLeft = ref(true);

// 至一热搜显示与隐藏
const isVisibleRecommend = ref(true);
const isVisibleRecommendIcon = ref(false);
const isVisibleRecommendPopup = ref(false);

const toggleVisibility = (type: number) => {
  if (type) {
    isVisibleRecommendIcon.value = !isVisibleRecommendIcon.value;
    isVisibleRecommendPopup.value = !isVisibleRecommendPopup.value;
  } else if (isVisibleRecommend.value) {
    isVisibleRecommend.value = false;
    isVisibleRecommendIcon.value = true;
  }
};

const setNewQa = (e: string, list: any) => {
  console.log("旧会话信息", { id: e, list });
};

const scrollToPosition = (position: any) => {
  let attr = position.split("%");
  let indexs = attr[1].replace(/\[|\]/g, "");
  const element = document.getElementsByClassName(`${attr[0]}`);
  let list = state.consultationList;
  for (let i = 0; i < list.length; i++) {
    if (
      list[i].questionType &&
      list[i].questionType === 1 &&
      list[i].requestId == attr[0]
    ) {
      list[i].activeNames = ["1"];
      if (
        list[i].answerRaw &&
        list[i].answerRaw.docReferencesDistinct?.length > 0
      ) {
        list[i].answerRaw.docReferencesDistinct.forEach((j: any) => {
          if (hasCommonCharacters(indexs, j.indexId.toString())) {
            j.active = true;
          } else {
            j.active = false;
          }
        });
      }
    } else if (list[i].questionType && list[i].questionType === 1) {
      list[i].activeNames = [];
      if (
        list[i].answerRaw &&
        list[i].answerRaw.docReferencesDistinct?.length > 0
      ) {
        list[i].answerRaw.docReferencesDistinct.forEach((j: any) => {
          j.active = false;
        });
      }
    }
  }
  if (scrollContainer && scrollContainer.value) {
    scrollContainer.value.scrollTop =
      element[0].offsetTop + scrollContainer.value.scrollTop;
  }
};
const sendQa = () => {
  state.isYouKnown = true;
  if (state.imgList.length > 0 || state.questionType == 6) {
    if (state.questionType != 6) {
      state.isNewWindow = true;
      input.value.focus();
      state.consultationList = [];
      state.guessList = [];
      state.sessionId = "";
      state.isShowLikePopover = false;
      window.scrollTo(0, document.body.scrollHeight);
      // stopReceiveData(2);
    }
    state.questionType = 6;
  }
  if (
    state.questionType !== 7 &&
    state.questionType !== 8 &&
    state.fileList.length > 0
  ) {
    state.isNewWindow = true;
    input.value.focus();
    state.consultationList = [];
    state.guessList = [];
    state.sessionId = "";
    state.isShowLikePopover = false;
    window.scrollTo(0, document.body.scrollHeight);
    state.questionType = 7;

  } else if (state.questionType === 7 && state.fileList.length >= 0) {
    state.fileList = false;
    state.questionType = 7;
  }
  // if (state.fileList.length > 0 || state.questionType == 7 || state.questionType == 8) {
  //   if (state.questionType != 7 && state.questionType !== 8 ) {
  //     state.isNewWindow = true;
  //     input.value.focus();
  //     state.consultationList = [];
  //     state.guessList = [];
  //     state.sessionId = "";
  //     state.isShowLikePopover = false;
  //     window.scrollTo(0, document.body.scrollHeight);
  //     // stopReceiveData(2);
  //   }
  //   state.questionType = 7;
  // }
  initSSE();
  toggleVisibility(0);
};
const hasCommonCharacters = (str1: string, str2: string) => {
  // 将字符串转换成集合（Set），假设字符串以逗号分隔
  const set2 = new Set(str2.split(","));

  // 遍历第二个集合，检查是否存在相同的字符
  for (let char of set2) {
    if (str1.includes(char)) {
      return true;
    }
  }

  return false;
};
const openFile = (e: any) => {
  // let sizes = proxy?.$utils.getFileSize(e.filePath);
  if (e.filePath) {
    location.href = e.filePath;
  } else {
    proxy?.$showToast("暂无此源文档相关路径");
  }
};
const addVoiceItem = (e: any) => {
  state.sendText = e.text;
  state.sendHidenText = e.text;
  state.isShowSoundRecording = false;
  state.isShowVoiceInput = false;
  state.isYouKnown = true;
  state.questionType = 2;
  initSSE();
};
const bindChangeKeyword = () => {
  state.isShowVoiceInput = false;
};
const getHomeInfo = () => {
  let area = localStorage.getItem("area")
    ? JSON.parse(localStorage.getItem("area") || "{}")
    : "";
  proxy?.$api
    .get(process.env.VUE_APP_BASE_API_URL + "/wechatApi/getHomeInfo", {
      cityName: area
        ? area.selectedOptions[area.selectedOptions.length - 1].text
        : "上海",
    })
    .then((res: any) => {
      if (res.code === 200) {
        if (area) {
          res.data.cityName =
            area.selectedOptions[area.selectedOptions.length - 1].text;
        }
        localStorage.setItem("homeInfo", JSON.stringify(res.data));
        state.homeInfo = res.data;
      }
    });
};
const setOldSession = (e: any) => {
  toggleVisibility(0);
  state.guessList = [];
  state.isShowLikePopover = false;
  state.sessionId = e.id;
  let list = JSON.parse(JSON.stringify(e.list));
  state.questionType = list[1].questionType;
  let classification: any = [];
  for (let j = 0; j < list.length; j++) {
    let i = list[j];
    if (j === 1 && i.questionType === 8) {
      state.questionType = 8;
      state.modelType = true;
    } else if (j === 1 && i.questionType !== 8) {
      state.questionType = i.questionType;
      state.modelType = false;
    }
    if (i.type === 1 || i.questionType) {
      let arr = i.classContent?.split("|") || [];
      for (let j = 0; j < arr.length; j++) {
        arr[j] = arr[j].replace(
          /\ball\b/g,
          state.checkedLang
            ? language.messageEN.contacts
            : language.messageZH.contacts
        );
        if (i && i.status === 0 && arr[j].includes("业务领域")) {
          let typeText = arr[j].split(":")[1];
          i.answerContent = i.answerContent.replace(
            /<<类型>>|&lt;&lt;类型&gt;&gt;/g,
            `<span class="phone-tips" data-id=${i.requestId} style="color: #5CB2FF">${typeText}</span>`
          );
        }
        arr[j] = proxy?.$utils.phoneReg(arr[j], arr[j].requestId);
        let seconed = marked(arr[j]);
        arr[j] = seconed;
      }
      classification = arr;
      let html = i.answerContent;
      html = proxy?.$utils.phoneReg(html, i.requestId) || html;
      if (classification.length > 0) {
        const regex1 = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g;
        i.classification = classification;
      }
      i.answerContent = marked(html);
      i.answerRaw = i.answerRaw && typeof i.answerRaw !== 'string' ? JSON.parse(i.answerRaw) : null;
      i.printEnd = true;
      i.activeNames = [];
      i.activeNames1 = i.status === 0 ? ["1"] : [];
      i.isShowRate = i.feedBackType == 99;
      // i.isShowRate = false;
      i.isShowRateOpBox = false;
    }
  }
  state.consultationList = list;
  window.scrollTo(0, document.body.scrollHeight);
};
const props = defineProps({
  selectOldWin: {
    type: String,
    default: "",
  },
  bot_id: {
    type: String,
    default: 'app-q1WQIYFgyDI4yjbeV2h6PYMi'
  },
  isTolk: {
    type: Boolean,
    default: true,
  },

  bot_index: {
    type: Number,
    default: 0,
  }
});

const isFullWidth = ref(false)
const dynamicStyles = computed(() => ({
  width: isFullWidth.value ? '94vw !important' : '93.5vw !important',
}));
const bot_index = ref()

watch(
  () => props.bot_id || props.isTolk,
  (newVal) => {
    console.log(props.isTolk)
    if ( !props.isTolk) {
      isFullWidth.value = true;
    } else {
      isFullWidth.value = false;
    }
    bot_index.value = props.bot_index
    console.log("isFullWidth.value", isFullWidth.value);
  },
  { immediate: true } // 立即执行一次监听回调
);
const setFieldFocus = () => {
  state.inputFieldFocus = true;
  input.value.focus();
};
const squareData = ref()
const openNewWindow = (type: number = 1) => {
  if (type == 2) {
    if (props.isTolk == false) {
      isFullWidth.value = false
      createSession(true)
    }
  } else if (type == 3) {
    // 创建新的聊天
    createSession(true)
  }
  isVisibleRecommend.value = true;
  isVisibleRecommendIcon.value = isVisibleRecommendPopup.value = false;
  state.isNewWindow = true;
  input.value?.focus();
  state.consultationList = [];
  state.guessList = [];
  state.sessionId = "";
  state.questionType = type;
  state.isShowLikePopover = false;
  window.scrollTo(0, document.body.scrollHeight);
  stopReceiveData(2);
  proxy?.$showToast(
    state.checkedLang ? language.messageEN.newTalk : language.messageZH.newTalk
  );
};
const emit = defineEmits();
// 切换中英文
const changeLange = () => {
  state.checkedLang = !state.checkedLang;
  // 传给父组件
  emit("checkedLang", state.checkedLang);
  getFeedBackSelect();
};
// 重新进行问答
const bindRefresh = async (item: any) => {
  state.sendHidenText = item.questionContent;
  if (state.questionType === 6 && item.resourceFile) {
    const uploadedFile = {
      imgUrl: item.resourceFile, // 上传后的文件 URL
    };
    // 上传成功，设置文件列表
    state.imgList = [uploadedFile];
  }
  if (state.questionType === 7 && item.resourceFile) {
    state.fileList = await getFileDetails(item);
  }
  initSSE();
};
// 停止接收数据
const stopReceiveData = (type: number) => {
  state.actionStop = true;
  stopStream(type);
};
// 启动个人信息的Popup
const openCharacterPopup = () => {
  characterPopupRef.value.active();
};

// const startTextToSpeech = (str: string, index: number) => {
//   const list = JSON.parse(JSON.stringify(state.consultationList));
//   list.forEach((i: any, n: number) => {
//     if (n === index) {
//       if (!i.isSpeech) {
//         VoiceAnnouncementsInstance.startVoiceFunction(str);
//       } else {
//         VoiceAnnouncementsInstance.stopVoiceFunction(str);
//       }
//     } else {
//       VoiceAnnouncementsInstance.stopVoiceFunction(str);
//     }
//   });
//   state.consultationList = list;
// };
const bindOptClick = () => {
  proxy?.$showToast("功能模块建设中");
};
// 定义事件处理函数
const handleDocumentClick = (event: any) => {
  // 在这里执行你需要的操作
  hideFooterArea();
};

const hideFooterArea = () => {
  state.showArea = false;
};
const sendTextChange = () => {
  // 检查提问问题输入框是否有值
  // state.showArea = state.sendText ? true : false;
  state.showArea = false;
};
// 点击热门问答
const clickItemQa = (e: string, type: number) => {
  if (state.questionType === 6 || state.questionType === 7) {
    openNewWindow();
  }
  state.isPopverClose = false;
  state.isYouKnown = type !== 3;
  state.questionType = type;
  window.scrollTo(0, document.body.scrollHeight);
  e;
  if (!state.isDisabled) {
    state.sendHidenText = e;
    initSSE();
    toggleVisibility(0);
  }
};
// 获取推荐问题
const getQuizRecommend = (type: number) => {
  if (type) {
    state.isPopverClose = false;
  }
  if (!state.navIndex) {
    proxy?.$api
      .get(
        process.env.VUE_APP_BASE_API_URL + "/wechatApi/dict/quiz_recommend_type"
      )
      .then((res: any) => {
        console.log(res);
        if (res.code === 200) {
          state.listTabItem = res.data;
          state.navIndex = res.data[0].dictValue;
        }
      });
  }
  proxy?.$api
    .get(
      process.env.VUE_APP_BASE_API_URL + "/wechatApi/getQuizRecommend?total=7",
      {
        type: state.navIndex,
        lang: state.checkedLang ? "en" : "zh",
      }
    )
    .then((res: any) => {
      if (res.code === 200) {
        state.list = res.data;
      }
    });
};
// 分享
const handleShare = (item: any) => {
  state.shareItem = item;
  let userInfo = localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo") || "{}")
    : null;
  let mail = userInfo ? userInfo.user?.email.split("@")[0] : "";
  const url = window.location.href.split("#")[0];
  const ShareUrl =
    url + "#/preview?requestId=" + state.shareItem.requestId + "&email=" + mail;
  navigator.clipboard
    .writeText(ShareUrl)
    .then(() => {
      ElMessage({
        message: state.checkedLang
          ? language.messageEN.textCopiedToClipboard
          : language.messageZH.textCopiedToClipboard,
        type: "success",
      });
    })
    .catch((err) => {
      ElMessage({
        message: state.checkedLang
          ? language.messageEN.shareFailed
          : language.messageZH.shareFailed,
        type: "warning",
      });
    });
};
// 点赞
const handlerLike = (id: string, status: number) => {
  let data = JSON.parse(JSON.stringify(state.consultationList));
  proxy?.$api
    .post(process.env.VUE_APP_BASE_API_URL + "/wechatApi/updateQARecord", {
      requestId: id,
      feedBackType: status,
      feedBackComment: null,
      feedBackDetail: null,
    })
    .then((res: any) => {
      if (res.code === 200) {
        data.forEach((i: any) => {
          // if (i.feedBackType == 2 && i.feedBackType != 1) {
          //   i.feedBackType = 0;
          // }

          if (i.requestId === id) {
            i.feedBackType = status;
          }
        });
        state.consultationList = data;
      }
    });
};
const showFeedBack = (id: string, status: number, type: any, value: any) => {
  if (value) {
    state.cancleLikeID = id;

    if (value <= 3) {
      state.feedBackScore = value;
      state.showFeedBack = true;
      state.feedBackText = "";
    } else {
      state.feedBackScore = value;
      state.cancleLikeID = id;
      state.cancleLikeStatus = status;
      state.feedBackChecked = [];
      state.feedBackText = "";
      handlerCancleLike();
    }
  } else {
    proxy?.$showToast(
      state.checkedLang
        ? language.messageEN.assisant
        : language.messageZH.assisant
    );
  }

  // if(type != 2) {
  //   state.cancleLikeID = id;
  //   state.cancleLikeStatus = status;
  //   state.feedBackChecked = [];
  //   state.feedBackText = [];
  //   state.showFeedBack = true;
  // } else {
  //   state.cancleLikeID = id;
  //   state.cancleLikeStatus = 0;
  //   state.showFeedBack = false;
  //   handlerCancleLike()
  // }
};
// 取消点赞
const handlerCancleLike = () => {
  let data = JSON.parse(JSON.stringify(state.consultationList));
  proxy?.$api
    .post(process.env.VUE_APP_BASE_API_URL + "/wechatApi/updateQARecord", {
      requestId: state.cancleLikeID,
      // feedBackType: state.cancleLikeStatus,
      feedBackType: 99,
      feedBackComment: state.feedBackChecked?.toString(),
      feedBackDetail: state.feedBackText || "",
      feedBackScore: state.feedBackScore,
    })
    .then((res: any) => {
      if (res.code === 200) {
        data.forEach((i: any) => {
          if (i.requestId === state.cancleLikeID) {
            i.feedBackType = 99;
            // i.isShowRate = false;
            i.isShowRateOpBox = false;
          }
        });
        state.feedBackText = "";
        state.showFeedBack = false;
        state.cancleLikeID = null;
        state.cancleLikeStatus = null;
        state.feedBackScore = 0;
        state.consultationList = data;
        state.isShowLikePopover = false;
        proxy?.$showToast(
          state.checkedLang
            ? language.messageEN.thank
            : language.messageZH.thank
        );
      }
    });
};

// 复制
const handlerCopy = (str: string, id: string) => {
  let dom = document.getElementsByClassName(id);

  let clipboard = new Clipboard(".copy-btn");
  clipboard.on("success", (e) => {
    proxy?.$showToast(
      state.checkedLang
        ? language.messageEN.clipboard
        : language.messageZH.clipboard
    );
    clipboard.destroy();
  });

  // navigator.clipboard.writeText(str).then(
  //   function () {
  //     proxy?.$showToast("成功复制到剪贴板");
  //   },
  //   function (err) {
  //     proxy?.$showToast("无法复制到剪贴板：");
  //   }
  // );
};

// 获取底部高度
const getFooterHeight = () => {
  // 在 Vue 组件中
  state.inputFieldFocus = false;
  setTimeout(() => {
    const footerHeight =
      document.querySelector(".assistant-footer")?.clientHeight;
    state.floatBottom = footerHeight;
    return footerHeight || 54;
  }, 0);
};

// 滚动到最底部
const scrollToBottom = () => {
  if (scrollContainer && scrollContainer.value) {
    scrollContainer.value.scrollTop = scrollContainer.value.scrollHeight;
  }
};

// 监听是否使用户手动滚动
const handleScroll = () => {
  // 当用户滚动到顶部一定距离以上时，认为是用户手动滚动
  if (scrollContainer && scrollContainer.value) {
    if (
      scrollContainer.value.scrollTop + scrollContainer.value.clientHeight <
      scrollContainer.value.scrollHeight - 10
    ) {
      state.userScrolled = true;
    } else {
      state.userScrolled = false;
    }
  }
};

onUpdated(() => {
  if (!state.userScrolled) {
    scrollToBottom();
  }
});
// 监听底部区域显示
watch(
  () => state.showArea,
  () => {
    proxy?.$nextTick(() => {
      // 获取底部高度 并且设置内容区域距离底部的内边距
      state.contentPadding = getFooterHeight();
    });
  },
  {
    immediate: true,
    deep: true,
  }
);
// 在组件挂载时添加事件监听器

onMounted(() => {
  // getMessages()
  // createSession(true)
  // pollForAnswer(false)
  document.addEventListener("click", handleDocumentClick);
  // if(localStorage.getItem('isPreview') === 'true') {
  //   setOldSession({id: localStorage.getItem('sessionId')})
  //   localStorage.removeItem('isPreview');
  //   localStorage.removeItem('sessionId')
  // }
  state.userInfo = localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo") || "{}")
    : null;
  scrollToBottom();
  getHomeInfo();
  proxy?.$utils.setCheckDomColor(".main-container", "background", "#F1F8FE");
  getQuizRecommend(0);
  getFeedBackSelect();
  window.addEventListener("scroll", handleScroll);
  if (props.selectOldWin) {
    clickItemQa(props.selectOldWin, 1);
  } else if (proxy?.$route.query?.sendText) {
    clickItemQa(proxy?.$route.query?.sendText, 5);
  } else {
    setTimeout(() => {
      state.isShowReco = true;
    }, 1000);
  }
  proxy?.$nextTick(() => {
    getConfigSignature();
  });
});
// 在组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
  document.removeEventListener("click", handleDocumentClick);
  if (state.eventSource) {
    state.eventSource.close(); // 关闭连接
  }
  clearTimeout(timeoutHandle);

});

const getConfigSignature = async () => {
  const env = localStorage.getItem("env");
  let url =
    env === "wxwork"
      ? process.env.VUE_APP_BASE_API_URL + "/wechatApi/getJSTicket"
      : process.env.VUE_APP_BASE_API_URL + "/wechatApi/getOAJSTicket";
  proxy?.$api
    .post(url, {
      url: window.location.href.split("#")[0],
    })
    .then((res: any) => {
      if (res.code === 200) {
        // wxAuth(res.data);
      }
    });
};
const getFeedBackSelect = () => {
  // const env = state.checkedLang?'/wechatApi/dict/feedbackcontent_en':'/wechatApi/dict/feedbackcontent';
  // proxy?.$apizhu shi
  //   .get(process.env.VUE_APP_BASE_API_URL + env)
  //   .then((res: any) => {
  //     if (res.code === 200 && res.data.length > 0) {
  //       state.feedBackSelect = res.data;
  //     }
  //   });
};
// 获取assistantLeft子组件方法
const assistantLeftRef = ref(null);
// 流式获取问答数据
const initSSE = () => {
  if (!state.sendHidenText) {
    state.sendHidenText = state.sendText;
  }
  const sendText =
    JSON.parse(JSON.stringify(state.sendText)) ||
    JSON.parse(JSON.stringify(state.sendHidenText));
  if (!sendText) {
    proxy?.$showToast("发送内容不能为空");
    return false;
  }
  if (state.isNewWindow) {
    state.isNewWindow = false;
  }
  if (state.isShowReco) {
    state.isShowReco = false;
  }
  if (state.isWait || state.isDisabled) {
    return;
  }
  state.isDisabled = true;
  emit("checkedDisabled", state.isDisabled);
  state.showConsultation = true;
  state.isWait = true;
  state.printBackHtml = "";
  state.guessList = [];
  let obj = {
    text: sendText,
    type: 0,
    imgList: state.imgList,
    fileList: state.fileList,
    answerContent:'',
  };
  // state.fileList = []
  state.consultationList.push(obj);
  console.log(state.consultationList)

  let answerData: any = [];
  scrollToBottom();
  state.sendText = "";
  // state.sendHidenText = "";
  if (state.questionType === 6) {
    initImageSSE(sendText);
  } else if (state.questionType === 7) {
    initFileSSE(sendText);
  } else if (state.questionType === 8) {
    initTextSSE(sendText);
  } else {
    initTextSSE(sendText);
  }
};
// 获取文档问答流式数据
const initFileSSE = (sendText: string) => {
  let eventSourceUrl =
    process.env.VUE_APP_BASE_API_URL +
    `/wechatApi/calAliFileRag?questionContent=${encodeURIComponent(
      sendText
    )}&questionType=${state.questionType}&lang=${state.checkedLang ? "en" : "zh"
    }&token=${localStorage.getItem("token")}&requestTime=${moment().valueOf()}`;
  if (state.sessionId) {
    eventSourceUrl =
      process.env.VUE_APP_BASE_API_URL +
      `/wechatApi/calAliFileRag?questionContent=${encodeURIComponent(
        sendText
      )}&questionType=${state.questionType}&lang=${state.checkedLang ? "en" : "zh"
      }&token=${localStorage.getItem(
        "token"
      )}&requestTime=${moment().valueOf()}&sessionId=${state.sessionId}`;
  }
  state.controller = new AbortController();
  const { signal } = state.controller;
  let imgList = [];
  let fileIdLis = [];
  console.log(state.fileList, 'state.fileList')

  if (state.fileList.length > 0) {
    imgList = state.fileList.map(
      (item: { fileUrl: string }) => item.fileUrl
    );
    fileIdLis = state.fileList.map(
      (item: { fileId: string }) => item.fileId
    );
  }
  //  if (state.fileList.length === 0) {
  //   let oldFiles = state.consultationList.filter(i => i.fileList && i.fileList.length > 0);
  //   console.log(oldFiles, 'oldFiles')
  //   if (oldFiles.length > 0) {
  //     fileIdLis = oldFiles[oldFiles.length - 1].fileList.map((i: any) => i.file_id)
  //   }
  // }
  console.log(state.consultationList, 'state.consultationList')
  fetchEventSource(eventSourceUrl, {
    method: "POST",
    signal: signal,
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
    },
    body: JSON.stringify({
      questionContent: sendText,
      sessionId: state.sessionId || localStorage.getItem("sessionId"),
      imgUrl: imgList,
      fileIds: fileIdLis,
      questionType: 7,
    }),
    onmessage(event) {
      state.fileList = [];
      let data = JSON.parse(event.data);
      if (state.isWait) {
        state.isWait = false;
      }
      if (state.printEnd) {
        state.printEnd = false;
      }
      if (!state.sessionId) {
        state.sessionId = data.sessionId;
        assistantLeftRef.value?.newSessionBox();
      }
      state.answerObj = Object.assign({}, data);
      state.printAllHtml = data.answerContent;
      updateContent(data);
      // 在这里操作流式数据
    },
    onclose() {
      stopStream(1);
    },
    onerror(error) {
      console.info(error);
      throw error;
      //返回流报错
    },
  });
};

// 获取图片问答流式数据
const initImageSSE = (sendText: string) => {
  let eventSourceUrl =
    process.env.VUE_APP_BASE_API_URL +
    `/wechatApi/VisualUnderstanding?questionContent=${encodeURIComponent(
      sendText
    )}&questionType=${state.questionType}&lang=${state.checkedLang ? "en" : "zh"
    }&token=${localStorage.getItem("token")}&requestTime=${moment().valueOf()}`;
  if (state.sessionId) {
    eventSourceUrl =
      process.env.VUE_APP_BASE_API_URL +
      `/wechatApi/VisualUnderstanding?questionContent=${encodeURIComponent(
        sendText
      )}&questionType=${state.questionType}&lang=${state.checkedLang ? "en" : "zh"
      }&token=${localStorage.getItem(
        "token"
      )}&requestTime=${moment().valueOf()}&sessionId=${state.sessionId}`;
  }
  state.controller = new AbortController();
  const { signal } = state.controller;
  const imgList = state.imgList.map(
    (item: { imgUrl: string }) => item.imgUrl
  );
  fetchEventSource(eventSourceUrl, {
    method: "POST",
    signal: signal,
    headers: {
      "Content-Type": "application/json;charset=UTF-8",
    },
    body: JSON.stringify({
      questionContent: sendText,
      sessionId: state.sessionId || localStorage.getItem("sessionId"),
      imgUrl: imgList,
      questionType: 6,
    }),
    onmessage(event) {
      state.imgList = [];
      let data = JSON.parse(event.data);
      if (state.isWait) {
        state.isWait = false;
      }
      if (state.printEnd) {
        state.printEnd = false;
      }
      if (!state.sessionId) {
        state.sessionId = data.sessionId;
        assistantLeftRef.value?.newSessionBox();
      }
      state.answerObj = Object.assign({}, data);
      state.printAllHtml = data.answerContent;
      updateContent(data);
      // 在这里操作流式数据
    },
    onclose() {
      stopStream(1);
    },
    onerror(error) {
      console.info(error);
      throw error;
      //返回流报错
    },
  });
};
// 重置超时计时器
const resetTimeout = () => {
  if (timeoutHandle) {
    clearTimeout(timeoutHandle); // 清除之前的计时器
  }
  if (state.eventSource && state.eventSource.readyState === EventSource.OPEN) {
    timeoutHandle = setTimeout(() => {
      proxy?.$showToast("API返回超时，已经断开服务");
      stopStream(1);
    }, state.timeoutDuration);
  }
};
const conversation_id = ref()
const createSession = async (isCreate = false) => {
  conversation_id.value = ''
  // 如果有id则不用创建智能体
  // if (localStorage.getItem(props.bot_id) && !isCreate) {
  //   let objId = JSON.parse(localStorage.getItem(props.bot_id))
  //   conversation_id.value = objId[props.bot_id].conversation_id
  //   await pollForAnswer(false)
  // } else {
  //   const res = await proxy?.$api.post("https://api.coze.cn/v1/conversations", {
  //   }, {
  //     headers: {
  //       'Authorization': 'Bearer app-q1WQIYFgyDI4yjbeV2h6PYMi',
  //       "Content-Type": "application/json"
  //     },
  //   })
  //   conversation_id.value = res.data.id
  //   // 创建完成之后将智能体id和创建会话id存本地

  //   const data = {
  //     [props.bot_id]: {
  //       bot_id: props.bot_id,
  //       conversation_id: conversation_id.value
  //     }
  //   };

  //   localStorage.setItem(props.bot_id, JSON.stringify(data));
  // }


}
const chat_id = ref()
const sendMessage = async (sendText: any) => {
  const res = await proxy?.$api.post(`http://10tz44994vg46.vicp.fun/v1/chat-messages`, {
    "inputs": {},
    "query": sendText,
    "response_mode": "streaming",
    "conversation_id": conversation_id.value,
    "user": "123",
    "files": [
      {
        "type": "image",
        "transfer_method": "remote_url",
        "url": "https://cloud.dify.ai/logo/logo-site.png"
      }
    ]

  }, {
    headers: {
      'Authorization': 'Bearer ' + props.bot_id,
      "Content-Type": "application/json"
    },

  })
  // 使用正则表达式匹配 conversation_id 的值
const match = res.match(/"conversation_id"\s*:\s*"([^"]*)"/);
const conversationId = match ? match[1] : null;
console.log(conversationId);
  conversation_id.value = conversationId


  console.log("-------------")
  return res
}
const getMessages = async () => {
  const res = await proxy?.$api.get(`http://10tz44994vg46.vicp.fun/v1/messages?user=123&last_id=&limit=20&conversation_id=${conversation_id.value}`, {
    "order": "ASC"
  }, {
    headers: {
      'Authorization': 'Bearer ' + props.bot_id,
      "Content-Type": "application/json"
    },

  })



  // console.log('getMessages',res)
  return res

}
const cancelSend = async () => {
  const res = await proxy?.$api.post(`http://10tz44994vg46.vicp.fun/v1/chat/cancel?conversation_id=${conversation_id.value}&chat_id=${chat_id.value}`)
  console.log("cancelSend", res)
  return res
}
let pollCount = 0; // 轮询计数器
const maxPolls = 20; // 最大轮询次数
const interval = 3000; // 每3秒轮询一次

const pollForAnswer = async (isUpdateContent = true) => {
  const pollId = setInterval(async () => {
    if (pollCount >= maxPolls) {
      console.log('达到最大轮询次数，停止轮询。');
      clearInterval(pollId); // 清除定时器，停止轮询
      return;
    }

    try {
      const res = await getMessages()

      if (res.data) {
        state.sendText = ''
        isVisibleRecommend.value = false;
    
        state.consultationList = res.data.flatMap((item, index) => {
          const questionResult = {
            text: item.query ||item.text,
            type: 0, 
            imgList: [],
            fileList: [],
            answerContent: item.answer , 
            printEnd: false,
          };

          const answerResult = {
            text: item.query ,
            type: 1, 
            imgList: [],
            fileList: [],
            answerContent: item.answer , 
            printEnd: true, 
          };

          return [answerResult, questionResult];
        }).reverse(); 
        console.log('state1232', state)

        if (state.isWait) {
          state.isWait = false;
        }
        if (state.printEnd) {
          state.printEnd = false;
        }

        // state.answerObj = Object.assign({}, data);

        console.log("sta123123te", state)

        const data = {
          answerContent: res.data[0].answer,
          questionContent: res.data[0].query
        }
        state.isDisabled = false
        state.printAllHtml = res.data[0].answer
        state.currentIndex = 0
        if (isUpdateContent) {
          updateContent(data);

        } else {
          state.printBackHtml = state.printAllHtml

        }
        clearInterval(pollId); // 停止轮询

      }
    } catch (error) {
      console.error('Error during polling:', error);
    }

    pollCount++; // 更新轮询计数器
  }, interval);
};

// 获取文字问答流式数据
const initTextSSE = async (sendText: string) => {


  state.printEnd = true;
  await sendMessage(sendText)
  await pollForAnswer()


}

// 对流式数据中返回的content进行处理再显示
const backHtm = computed(() => {
  return marked(state.printBackHtml);
});
let timeoutId = ref()
// 对每一条流式数据进行处理打印及效果处理
const updateContent = (data: any) => {
  state.isDisabled = true
  if (state.currentIndex < state.printAllHtml.length) {
    state.printBackHtml += state.printAllHtml[state.currentIndex];
    state.currentIndex++;
    timeoutId.value = setTimeout(() => {
      updateContent(data);
    }, 50); // 调整延迟以控制显示速度
  } else {
    state.isDisabled = false;
    emit("checkedDisabled", state.isDisabled);
    state.sendHidenText = ''

  }
};

// 停止流 以及后续的操作
const stopStream = async (type: number, msg = '') => {
  //  await  cancelSend()
  clearTimeout(timeoutId.value);
  state.printBackHtml = state.printAllHtml
  state.isDisabled = false
  state.sendHidenText = ''
  state.sendText = ''
  const sendText = state.sendText
  //   JSON.parse(JSON.stringify(state.sendText)) ||
  //   JSON.parse(JSON.stringify(state.sendHidenText));
  if (state.eventSource) {
    state.eventSource.close();
    clearTimeout(timeoutHandle);
  }
  if (state.controller) {
    state.controller.abort();
  }
  if (state.eventSource || state.controller) {
    if (state.isWait) {
      state.consultationList.push({
        type: type,
        questionType: state.questionType,
        answerContent: msg || (state.actionStop
          ? `${state.checkedLang
            ? language.messageEN.cancel
            : language.messageZH.cancel
          }`
          : `${state.checkedLang
            ? language.messageEN.feedback
            : language.messageZH.feedback
          }`),
      });
      state.isDisabled = false;
      emit("checkedDisabled", state.isDisabled);
      state.sendHidenText = "";
      state.sendText = "";
    } else {
      let obj: any = state.answerObj;
      let html =
        state.printAllHtml +
        `<p style="font-weight:700;font-size: 10px; margin: 4px 0;display: block;  color: #333;">* ${state.checkedLang
          ? language.messageEN.confirmation
          : language.messageZH.confirmation
        }</p>`;
      if (obj) {
        html = proxy?.$utils.phoneReg(html, obj.requestId) || html;
        obj.answerContent = marked(html);
        obj.answerRaw = obj.answerRaw && typeof obj.answerRaw !== 'string' ? JSON.parse(obj.answerRaw) : null;
        obj.printEnd = true;
        obj.activeNames = [];
        // obj.activeNames1 = obj.status == 0 ? ['1'] : [];
        obj.activeNames1 = ["1"];
        obj.ratevalue = 0;
        obj.isShowRate = true;
        obj.isShowRateOpBox = false;
        if (state.questionType !== 8) {
          if (obj.status === 1) {
            state.consultationList.push(obj);
            if (state.questionType !== 6 && state.questionType !== 7) {
              getClassification(sendText, obj.requestId, obj.sessionType || 0);
            } else {
              streamEndOp()
            }
          } else if (obj.status === 0) {
            if (state.questionType !== 6 && state.questionType !== 7) {
              state.isWait = true;
              getClassification(sendText, obj.requestId, obj.sessionType || 0, obj);
            } else {
              streamEndOp()
            }
          }
          if (
            state.isYouKnown &&
            obj.status === 1 &&
            obj.answerRaw?.docReferencesDistinct?.length > 0
          ) {
            getQuizYouAsk(sendText, obj.requestId, obj.sessionType || 0);
          }
        } else {
          state.consultationList.push(obj);
          state.isShowLikePopover = state.consultationList.length === 2;
          state.isDisabled = false;
          state.sendHidenText = "";
          state.isWait = true;
          state.classiFicationData = null;
          setTimeout(() => {
            let ele = document.querySelectorAll(".itema");
            ele[ele.length - 1].scrollIntoView({
              behavior: "smooth",
              block: "start", // 使元素顶部对齐视口顶部
            });
          }, 500);
        }

        state.sendText = ''
      }
    }
    state.sendText = "";
    // state.isDisabled = false;

    if (state.answerObj && state.answerObj.status === 0) {
      state.isWait = true;
    } else {
      state.isWait = false;
    }

    state.printEnd = true;
    state.isYouKnown = false;
    state.printBackHtml = "";
    state.printAllHtml = "";
    state.printThinkAllHtml = "";
    state.printThinkBackHtml = "";
    state.currentIndex = 0;
    state.answerObj = null;
    state.actionStop = false;
    state.imgList = [];
    if (type === 2) {
      state.consultationList = [];
    }
  }
};

// 在获取问答结束后继续获取分类类型数据
const getClassification = (
  questionContent: string,
  requestId: string,
  sessionType: string,
  obj: any = null
) => {
  let eventSourceUrl =
    process.env.VUE_APP_BASE_API_URL +
    `/wechatApi/quizCla?questionContent=${encodeURIComponent(
      questionContent
    )}&sessionId=${state.sessionId
    }&requestId=${requestId}&sessionType=${sessionType}&lang=${state.checkedLang ? "en" : "zh"
    }&token=` +
    localStorage.getItem("token");
  state.quizClassification = new EventSource(eventSourceUrl);
  state.quizClassification.onopen = () => { };

  state.quizClassification.onmessage = (event: any) => {
    state.classiFicationData = JSON.parse(event.data);
  };
  state.quizClassification.onerror = (error: any) => {
    stopStream1(1, obj);
  };
  // 重新获取历史记录
  assistantLeftRef.value?.getTop3QaList();
};
const isSearch = ref(false)

const getQuestionList = () => {

  isSearch.value = state.checkedLang
    ? language.messageEN.bot_question[bot_index.value].isClick
    : language.messageZH.bot_question[bot_index.value].isClick
  return state.checkedLang
    ? language.messageEN.bot_question[bot_index.value].question
    : language.messageZH.bot_question[bot_index.value].question

}
const seachQuestion = (value) => {

  state.sendText = value
  sendQa()
}
const stopStream1 = (type: number, obj: any = null) => {
  if (state.quizClassification) {
    state.quizClassification.close();
  }
  let consultationList = state.consultationList;
  if (obj) {
    consultationList.push(obj);
  }
  for (let i = 0; i < consultationList.length; i++) {
    let classification: any = [];
    let arr = state.classiFicationData?.classContent?.split("|") || [];
    for (let j = 0; j < arr.length; j++) {
      arr[j] = arr[j].replace(
        /\ball\b/g,
        state.checkedLang
          ? language.messageEN.contacts
          : language.messageZH.contacts
      );
      if (obj && obj.status === 0 && arr[j].includes("业务领域")) {
        let typeText = arr[j].split(":")[1];
        // typeText = typeText.replace(/;/g, " ");
        obj.answerContent = obj.answerContent.replace(
          /<<类型>>|&lt;&lt;类型&gt;&gt;/g,
          `<span class="phone-tips" data-id=${obj.requestId
          } style="color: #5CB2FF">${typeText.trim()}</span>`
        );
      }
      arr[j] = proxy?.$utils.phoneReg(arr[j], arr[j].requestId);

      let seconed = marked(arr[j]);
      // for (let k = 0; k < seconed.length; k++) {
      //   seconed[k] = proxy?.$utils.phoneReg(seconed[k]) || seconed[k];
      // }

      arr[j] = seconed;
    }
    classification = arr;

    if (consultationList[i].requestId === state.classiFicationData?.requestId) {
      consultationList[i].classification = classification;
    }
  }
  state.isShowLikePopover = consultationList.length === 2;
  state.isDisabled = false;
  emit("checkedDisabled", state.isDisabled);
  state.sendHidenText = "";
  state.isWait = false;
  state.classiFicationData = null;
  state.consultationList = consultationList;
  setTimeout(() => {
    let ele = document.querySelectorAll(".itema");
    ele[ele.length - 1].scrollIntoView({
      behavior: "smooth",
      block: "start", // 使元素顶部对齐视口顶部
    });
  }, 500);
};

const streamEndOp = () => {
  assistantLeftRef.value?.getTop3QaList();
  state.isShowLikePopover = state.consultationList.length === 2;
  state.isDisabled = false;
  state.sendHidenText = "";
  state.isWait = false;
  state.classiFicationData = null;
  state.consultationList = state.consultationList;
  setTimeout(() => {
    let ele = document.querySelectorAll(".itema");
    ele[ele.length - 1].scrollIntoView({
      behavior: "smooth",
      block: "start", // 使元素顶部对齐视口顶部
    });
  }, 500);
}

// 获取问答数据后 再查看是否需要 显示猜你想问
const getQuizYouAsk = (
  questionContent: string,
  requestId: string,
  sessionType: string
) => {
  proxy?.$api
    .get(process.env.VUE_APP_BASE_API_URL + "/wechatApi/quizEro", {
      questionContent,
      requestId,
      sessionType,
      sessionId: state.sessionId,
      token: localStorage.getItem("token"),
    })
    .then((res: any) => {
      if (res.code === 200 && res.data.length > 0) {
        state.guessList = res.data.map((i: any) => i);
        setTimeout(() => {
          let ele = document.querySelectorAll(".itema");
          ele[ele.length - 1].scrollIntoView({
            behavior: "smooth",
            block: "start", // 使元素顶部对齐视口顶部
          });
        }, 500);
      }
    });
};

// 对流式数据中返回的content进行处理再显示
const backThinkHtm = computed(() => {
  return marked(state.printThinkBackHtml || "");
});
// 对每一条流式数据进行处理打印及效果处理
const updateThinkContent = (data: any) => {
  if (state.currentIndex < state.printThinkAllHtml.length) {
    state.printThinkBackHtml += state.printThinkAllHtml[state.currentIndex];
    state.currentIndex++;
    setTimeout(() => {
      updateThinkContent(data);
    }, 50); // 调整延迟以控制显示速度
  }
};
</script>

<style lang="scss" scoped>
.quest-list {
  line-height: 30px;
  font-size: 16px;
}

.cursor-point {
  cursor: pointer !important;

}

.assistant-container {
  // <test
  width: 93.5vw;
  height: 95vh;
  // test>
  display: flex;
  flex-direction: row;
  min-width: 1400px;
  position: relative;
  margin: 2.5vh 24px 2.5vh 0;
  margin-left: 5%;
  border-radius: 14px;
  background: #fff;
  z-index: 1;
  background: #f3f9ff;

  .assistant-left {
    width: 14vw;
    height: 95vh;
  }

  /* 过渡效果 */
  .shrink-enter-active,
  .shrink-leave-active {
    transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;
    overflow: hidden;
    /* 防止内容溢出 */
  }

  /* 元素进入时的初始状态：宽度0，透明度0 */
  .shrink-enter {
    width: 0;
    opacity: 0;
  }

  /* 元素进入时的结束状态：宽度100%，透明度1 */
  .shrink-enter-to {
    width: 14vw;
    opacity: 1;
  }

  /* 元素离开时的初始状态：宽度100%，透明度1 */
  .shrink-leave {
    width: 14vw;
    opacity: 1;
  }

  /* 元素离开时的结束状态：宽度0，透明度0 */
  .shrink-leave-to {
    width: 0;
    opacity: 0;
  }

  .assistant-right {
    width: 100%;
    flex: 1;
    height: 95vh;
    min-width: 1400px;
    position: relative;

    .fold {
      position: absolute;
      width: 26px;
      height: 100%;
      left: 16px;
      top: 0;
      display: flex;
      align-items: center;

      img {
        width: 12px;
        height: 26px;
      }

      img:hover {
        cursor: pointer;
      }

      .active {
        transform: rotate(180deg);
      }
    }

    .right-head {
      width: 100%;
      margin-top: 23px;
      padding-left: 48px;
      padding-right: 33px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;

      .session-type {
        flex: 1;

        span {
          font-size: 16px;
        }
      }

      .changeLange {
        width: 7vw;

        //margin-right: 1.6vw;
        >div {
          display: flex;

          >div {
            width: 50%;
          }

          >div>span {
            background: rgba(92, 178, 255, 0.15);
            display: inline-block;
            width: 100%;
            height: 3.5vh;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          >div:first-child>span {
            border-top-left-radius: 3.5vh;
            border-bottom-left-radius: 3.5vh;
          }

          >div:last-child>span {
            border-top-right-radius: 3.5vh;
            border-bottom-right-radius: 3.5vh;
          }
        }

        .ZN>div:first-child>span {
          color: #fff;
          background: #5cb2ff;
        }

        .EN>div:last-child>span {
          color: #fff;
          background: #5cb2ff;
        }
      }

      .changeLange:hover {
        cursor: pointer;
      }

      .version {
        width: 5.2vw;
        height: 3.5vh;
        border-radius: 3.5vh;
        background: rgba(92, 178, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .layout-1 {
        width: 9.9494vw;
      }

      .layout-2 {
        width: 7.0791vw;
      }

      div {
        display: inline-block;
      }
    }

    .recommend-box {
      font-size: 16px;
      width: 56.5vw;
      margin: 4.8vh auto 0;
      padding: 2.7vh;
      border-radius: 14px;
      background: #1196DB0D;



      .desc {

        display: flex;
        align-items: center;
        justify-content: space-between;

        .robot {
          color: #999;
          font-size: 12px;
          margin-bottom: 1.1vh;

          .dailyrecommendations {
            color: rgba(129, 170, 171);
            font-size: 20px;
          }

          div:last-child {
            line-height: 26px;
          }
        }

        .refresh {
          color: #5cb2ff;
          font-size: 14px;
          display: flex;
          align-items: center;
          gap: 5px;

          span {
            font-size: 16px;
          }
        }

        .refresh:hover {
          cursor: pointer;
        }
      }

      .nav-tab {
        width: 100%;
        height: 2.5vh;
        display: flex;
        margin-bottom: 1.2vh;

        .nav-item {
          width: 25%;
          height: 100%;
          line-height: 2.5vh;
          text-align: center;
          color: #666;
          display: inline-block;

          .item-text {
            line-height: 2.5vh;
            text-align: center;
            font-size: 12px;
          }

          &.active {
            color: #5cb2ff;
            border-bottom: #5cb2ff 1px solid;
          }
        }
      }

      .nav-tab:hover {
        cursor: pointer;
      }

      .list-item {
        display: flex;
        align-items: center;

        div {
          min-width: 2vh;
          min-height: 2vh;
          line-height: 2vh;
          border-radius: 4px;
          font-size: 15px;
          display: inline-block;
          text-align: center;
          margin-right: 6px;
          color: #999;
        }

        .top-1 {
          background: #ea341c;
          color: #fff;
        }

        .top-2 {
          background: #f76f23;
          color: #fff;
        }

        .top-3 {
          background: #f7bb23;
          color: #fff;
        }

        .item {
          display: inline-block;
          flex: 1;
          text-align: left;
          font-size: 14px;
          margin: 1vh 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item:hover {
          cursor: pointer;
        }
      }

      .text {
        font-size: 14px;
        font-weight: 400;
        line-height: 200px;
        text-align: center;
      }
    }
  }

  .assistant-popup {
    border-radius: 14px;
    width: 20vw;
    height: 100%;
    background: #fff;
    padding: 20px;

    .recommend-box {
      font-size: 16px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 2.7vh;
      border-radius: 14px;
      background: #1196DB0D;



      .desc {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .robot {
          color: #999;
          font-size: 12px;
          margin-bottom: 1.1vh;

          .dailyrecommendations {
            color: #333;
            font-size: 18px;
          }

          div:last-child {
            line-height: 26px;
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          margin-bottom: auto;
        }

        .close {
          width: 16px;
          height: 16px;
          margin: 3px 0 4px;
          margin-left: auto;

          img {
            width: 100%;
            height: 100%;
            font-size: 16px;
          }
        }

        .close:hover {
          cursor: pointer;
        }

        .refresh {
          color: #5cb2ff;
          font-size: 14px;
          display: flex;
          align-items: center;
          gap: 5px;

          span {
            font-size: 16px;
          }
        }

        .refresh:hover {
          cursor: pointer;
        }
      }

      .nav-tab {
        width: 100%;
        height: 2.5vh;
        display: flex;
        margin-bottom: 1.2vh;

        .nav-item {
          width: 25%;
          height: 100%;
          line-height: 2.5vh;
          text-align: center;
          color: #666;
          display: inline-block;

          .item-text {
            line-height: 2.5vh;
            text-align: center;
            font-size: 12px;
          }

          &.active {
            color: #5cb2ff;
            border-bottom: #5cb2ff 1px solid;
          }
        }
      }

      .nav-tab:hover {
        cursor: pointer;
      }

      .list-item {
        display: flex;
        align-items: center;

        div {
          min-width: 2vh;
          min-height: 2vh;
          line-height: 2vh;
          border-radius: 4px;
          font-size: 15px;
          display: inline-block;
          text-align: center;
          margin-right: 6px;
          color: #999;
        }

        .top-1 {
          background: #ea341c;
          color: #fff;
        }

        .top-2 {
          background: #f76f23;
          color: #fff;
        }

        .top-3 {
          background: #f7bb23;
          color: #fff;
        }

        .item {
          display: inline-block;
          flex: 1;
          text-align: left;
          font-size: 14px;
          margin: 1vh 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item:hover {
          cursor: pointer;
        }
      }

      .text {
        font-size: 14px;
        font-weight: 400;
        line-height: 200px;
        text-align: center;
      }
    }
  }

  .ratesure {
    position: absolute;
    bottom: -36px;
    left: 0;
    right: 0;
    margin: auto;
    top: auto;
    width: 10%;
    display: flex;
    justify-content: center;

    img {
      width: 92px;
    }
  }

  .bg {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    border-radius: 14px;
    font-size: 14px;
    z-index: 101;
    background: #fff;
    box-shadow: 3px 0px 6px 0px rgba(92, 178, 255, 0.1);
  }

  .weather {
    height: 60px;
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-weight: 600;
  }

  .tip {
    display: block;
    font-size: 28px;
    color: v-bind("themeColor.textColorLightest");
    margin: 20px 0;
    font-weight: 500;
  }

  .content {
    display: flex;
    margin-top: 24px;
    width: 100%;
    flex-direction: column;
    background: v-bind("themeColor.fillWhite");
    border-radius: 24px;

    &.consultation-mode {
      background: none;
      border-radius: 20px;
      overflow-y: scroll;
      margin: 0 auto;
      z-index: 100;
      width: calc(100% - 60px);

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .desc {
      display: flex;
      color: v-bind("themeColor.textColor");
    }

    .guess-to-ask {
      &>span {
        color: #666;
        font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        margin-top: 14px;
        display: block;
      }

      .ask-list {
        margin-bottom: 10px;

        .list-text {
          width: fit-content;
          color: #333;
          font-family: "PingFang SC";
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          border-radius: 14px;
          border: 1px solid #e6edf4;
          background: #fff;
          margin-top: 10px;
          padding: 10px 12px 10px 20px;
          letter-spacing: 0px;
          line-height: 34px;
          display: flex;
          flex-direction: row;
          align-content: center;

          img {
            width: 8px;
            height: 12px;
            margin-left: 30px;
          }
        }
      }
    }

    .consultation-container {
      margin: 2vh 0;
      display: flex;
      flex-direction: column;

      .session-box {
        width: 56.5vw;
        height: 100%;
        margin: 0 auto;
        padding-right: 3px;
        overflow: auto;
      }

      .greet::-webkit-scrollbar {
        display: none;
      }

      .greet {
        padding-top: 77px;
        overflow: scroll;

        .logo {
          margin-right: 20px;

          img {
            margin-top: 5px;
          }
        }

        .ai-icon {
          width: 56.5vw;
          display: flex;
          margin: 0 auto;
          font-size: 20px;
          color: #333;
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 400;
          line-height: normal;

          .con {
            position: relative;

            .userName {
              color: #5CB2FF;
            }

            span {
              font-weight: bold;
            }

            .con-text {
              position: absolute;
              color: #999;
              font-size: 14px;
              width: 1050px;
              font-weight: 400;
              top: 34px;
            }
          }
        }

        .avatar {
          width: 231px;
          margin-top: -80px;
        }
      }

      .item.itemb {
        flex-direction: column;
        position: relative;

        .con {
          width: 100%;
          border-radius: 14;
          background: v-bind("themeColor.fillWhite");
          box-shadow: 0px 0px 4px v-bind("themeColor.fillBlueLight");
        }

        .con.loading-mask {
          background: initial;
        }

        .load-15 {
          font-size: .15rem;
        }

        .k-loader {
          display: inline-block;
          font-size: 0.15rem;
          margin: 0 0.5em;
          position: relative;
          height: 0.5em;
          width: 1em;
        }

        .k-loader:before,
        .k-loader:after {
          content: "";
          display: block;
          height: 0.3em;
          position: absolute;
          width: 0.3em;
        }

        .k-loader:before {
          animation: k-loadingK 1s ease-in-out infinite,
            k-loadingM 0.33s ease-in-out infinite;
          background: #5cb2ff;
        }

        .k-loader:after {
          animation: k-loadingL 1s ease-in-out infinite,
            k-loadingN 0.33s ease-in-out infinite;
          background: #ffb1b1;
        }

        .k-small {
          font-size: 1em;
        }

        .k-large {
          font-size: 4em;
        }

        .k-circle:before,
        .k-circle:after {
          border-radius: 50%;
        }

        .k-circle-before:before {
          border-radius: 50%;
        }

        .k-circle-after:after {
          border-radius: 50%;
        }

        @keyframes k-loadingK {
          0% {
            left: 0;
            transform: scale(1.1);
          }

          50% {
            left: 100%;
            transform: scale(1);
          }

          100% {
            left: 0;
            transform: scale(1.1);
          }
        }

        @keyframes k-loadingL {
          0% {
            left: 100%;
            transform: scale(1.1);
          }

          50% {
            left: 0;
            transform: scale(1);
          }

          100% {
            left: 100%;
            transform: scale(1.1);
          }
        }

        #loading {
          height: 60px;
          width: 100%;
          z-index: 1;
          margin-top: 0px;
          top: 0px;
        }

        #loading-center {
          position: relative;
        }

        #loading-center-absolute {
          width: auto;
        }

        .object {
          width: 8px;
          height: 30px;
          margin-right: 5px;
          background: linear-gradient(152.42deg, #5cb2ff 17.78%, #ffb1b1 100%);
          -webkit-animation: animate 1s infinite;
          animation: animate 1s infinite;
          float: left;
        }

        .object:last-child {
          margin-right: 0px;
        }

        .object:nth-child(10) {
          -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
        }

        .object:nth-child(9) {
          -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
        }

        .object:nth-child(8) {
          -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
        }

        .object:nth-child(7) {
          -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
        }

        .object:nth-child(6) {
          -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
        }

        .object:nth-child(5) {
          -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
        }

        .object:nth-child(4) {
          -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
        }

        .object:nth-child(3) {
          -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
        }

        .object:nth-child(2) {
          -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
        }

        @-webkit-keyframes animate {
          50% {
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
          }
        }

        @keyframes animate {
          50% {
            -ms-transform: scaleY(0);
            -webkit-transform: scaleY(0);
            transform: scaleY(0);
          }
        }

        .ai-icon {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          img {
            width: 29px;
            height: auto;
          }

          span {
            font-size: 16px;
            font-weight: 500;
            color: #999;
            line-height: initial;
            margin-left: 9px;
            vertical-align: bottom;
          }
        }

        .avatar {
          margin: 0;
        }
      }

      .item.itema {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .file-qa {
          .uploadImg {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-end;
            margin-bottom: 14px;

            .img {
              width: 205px;
              height: 50px;
              padding: 10px;
              border-radius: 10px;
              position: relative;
              border: 1px solid #e7e7e7;
              background-color: #fff;
              display: flex;
              flex-direction: row;
              gap: 8px;

              .img-thumbnail {
                width: 30px;
                height: 30px;
                border-radius: 5px;
                object-fit: cover;
              }

              .img-info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 100%;

                .img-name {
                  color: #000;
                  font-family: "PingFang SC";
                  font-size: 12px;
                  font-style: normal;
                  font-weight: 400;
                  max-width: 125px;
                  line-height: normal;
                  white-space: nowrap;
                  /* 禁止换行 */
                  overflow: hidden;
                  /* 隐藏溢出的文本 */
                  text-overflow: ellipsis;
                  /* 添加省略号 */
                }

                .img-size {
                  display: flex;
                  gap: 5px;
                  align-items: center;

                  div {
                    color: #999;
                    font-family: "PingFang SC";
                    font-size: 10px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: normal;
                  }
                }
              }
            }
          }
        }

        .img-qa {
          text-align: right;
          width: 100%;
          overflow: hidden;

          img {
            max-width: 60%;
            /* 限制图片最大宽度为容器宽度 */
            max-height: 400px;
            /* 限制图片最大高度为400px */
            height: auto;
            /* 保持宽高比例 */
            width: auto;
            /* 保持宽高比例 */
            object-fit: contain;
            /* 保证图片自适应容器，且不会变形 */
            border-radius: 14px;
            padding: 14px 20px;
            background-color: rgba(92, 178, 255, 0.30);
          }
        }

        .con {
          border-radius: 14px;
          background: rgba(92, 178, 255, 0.3);
          color: #333;
          margin: 30px 0 20px auto;
          width: fit-content;

          .voice-loader {
            margin: auto;
            width: 155px;
            height: 60px;
            display: flex;
            justify-content: center;
            gap: 1px;
          }

          .voice-loader span {
            display: block;
            background: #fff;
            width: 7px;
            height: 10%;
            border-radius: 14px;
            margin-right: 5px;
            float: left;
            margin-top: 15%;
          }

          .voice-loader {
            &>span:last-child {
              margin-right: 0px;
            }

            &>span:nth-child(1) {
              height: 20%;
            }

            &>span:nth-child(2) {
              height: 40%;
              margin-top: 10%;
            }

            &>span:nth-child(3) {
              height: 60%;
              margin-top: 5%;
            }

            &>span:nth-child(4) {
              height: 80%;
              margin-top: 0;
            }

            &>span:nth-child(5) {
              height: 60%;
              margin-top: 5%;
            }

            &>span:nth-child(6) {
              height: 40%;
              margin-top: 10%;
            }

            &>span:nth-child(7) {
              height: 20%;
              margin-top: 15%;
            }
          }

          .voice-loader-animate {
            &>span:last-child {
              margin-right: 0px;
            }

            &>span:nth-child(1) {
              animation: load 1.5s 1.4s infinite linear;
            }

            &>span:nth-child(2) {
              animation: load 1.5s 1.2s infinite linear;
            }

            &>span:nth-child(3) {
              animation: load 1.5s 1s infinite linear;
            }

            &>span:nth-child(4) {
              animation: load 1.5s 0.8s infinite linear;
            }

            &>span:nth-child(5) {
              animation: load 1.5s 0.6s infinite linear;
            }

            .loader span:nth-child(6) {
              animation: load 2.5s 0.4s infinite linear;
            }

            .loader span:nth-child(7) {
              animation: load 2.5s 0.2s infinite linear;
            }
          }

          @keyframes load {
            0% {
              background: #fff;
              margin-top: 15%;
              height: 10%;
            }

            50% {
              background: #f5f5f5;
              height: 100%;
              margin-top: 0%;
            }

            100% {
              background: #fff;
              height: 10%;
              margin-top: 15%;
            }
          }
        }
      }

      .item {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;

        &:first-child {
          margin-top: 0;
        }

        .module-type {
          margin-top: 24px;

          span {
            margin-right: 24px;
            font-size: 28px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 58px;
            color: rgba(148, 162, 176, 1);
            padding: 16px 50px;
            border-radius: 220px;
            background: rgba(240, 241, 242, 1);
          }

          span.active {
            background: rgba(219, 238, 255, 1);
            color: #5cb2ff;
          }
        }

        .avatar {
          margin-left: 16px;
          width: 51.6px;
          margin-right: 16px;
        }

        &:nth-child(2n) {
          justify-content: flex-end;

          .avatar {
            margin-left: 16px;
          }
        }

        .con {
          max-width: 100%;
          display: flex;
          flex-direction: column;
          padding: 14px 20px;
          border-radius: 24px;
          color: v-bind("themeColor.textColor");
          // box-shadow: 0px 0px 8px v-bind("themeColor.shadowColor");
          // font-size: 28px;
          overflow: hidden;

          .con-text {
            display: flex;
            flex-direction: column;
            // white-space: pre-wrap;
            overflow: hidden;

            ref {
              color: #999;
            }

            li {
              a {
                color: #5cb2ff;
              }
            }

            a {
              color: #5cb2ff !important;
            }

            .docname {
              font-size: 24px;
              color: v-bind("themeColor.textColor");
            }

            span {
              font-size: 28px;
            }

            .think-style {
              color: #999;
            }
          }

          .con-file {
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            gap: 6px;

            .el-collapse-item__header {
              font-size: 10px !important;
              height: 35px !important;
            }

            .activeName {
              color: #333;
              font-family: "PingFang SC";
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }

            .fromto {
              color: v-bind("themeColor.textColorLighten");
            }

            .file-item {
              color: #666;
              font-family: "PingFang SC";
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              margin: 4px 0px;
              word-break: break-all;

              &.active {
                color: #5cb2ff;
              }

              div:last-child {
                margin-top: 20px;
              }

              a {
                text-decoration: underline;
                color: #5cb2ff;
              }

              .iconfont {
                color: #5cb2ff;
                margin-right: 4px;
              }
            }
          }

          .features {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-content: center;
            font-size: 14px;
            height: 40px;
          }

          .con-opt {
            display: flex;
            justify-content: space-between;

            .left {
              display: flex;
              align-items: center;

              img {
                width: 14px;
                margin-right: 26px;
              }

              img:hover {
                cursor: pointer;
              }

              span {
                margin-left: 68px;

                &:first-child {
                  margin-left: 0;
                }

                &.icon-good-a-copy,
                &.icon-quxiaodianzan-a-copy {
                  color: #e97600;
                }
              }
            }

            .right {
              img {
                width: 36px;
                margin-left: 45px;
              }
            }
          }
        }
      }
    }
  }

  .rate {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;

    .demo-rate-block {
      margin-left: 15px;
    }

    .rate-submit {

      margin-left: 8px;

      div {
        display: inline-block;
        margin-right: 10px;
        color: #999;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
      }

      &.active {
        div {
          color: #5cb2ff;
        }

        div:hover {
          cursor: pointer;
        }
      }
    }

    &>div {
      color: #666;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
    }
  }

  .cxb-box {
    // position: fixed;
    z-index: 15;

    .cxb {
      img {
        width: 100px;
      }
    }

    .cxb-text {
      position: absolute;
      top: 0;
      left: 80px;

      img {
        width: 136px;
        margin-top: 20px;
      }
    }
  }

  .img-preview {
    background: #ffffff;
    width: 100%;
    padding: 20px 0 30px;


    .uploadImg {
      width: 100%;
      overflow-x: auto;
      display: flex;
      gap: 10px;

      .img {
        width: 205px;
        height: 50px;
        padding: 10px;
        border-radius: 10px;
        flex-shrink: 0;
        /* 防止子元素收缩 */
        position: relative;
        border: 1px solid #e7e7e7;
        display: flex;
        flex-direction: row;
        gap: 8px;

        .img-thumbnail {
          width: 30px;
          height: 30px;
          border-radius: 5px;
          object-fit: cover;
        }

        .img-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;

          .img-name {
            color: #000;
            font-family: "PingFang SC";
            font-size: 11px;
            font-style: normal;
            font-weight: 400;
            max-width: 125px;
            line-height: normal;
            white-space: nowrap;
            /* 禁止换行 */
            overflow: hidden;
            /* 隐藏溢出的文本 */
            text-overflow: ellipsis;
            /* 添加省略号 */
          }

          .img-size {
            display: flex;
            gap: 5px;
            align-items: center;

            div {
              color: #999;
              font-family: "PingFang SC";
              font-size: 10px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
            }
          }
        }

        .closeImg {
          font-size: 0px;
          top: 6px;
          right: 8px;
          position: absolute;

          img {
            width: 14px;
            height: 14px;
            object-fit: contain;
          }

          img:hover {
            cursor: pointer;
          }
        }
      }
    }
  }

  .assistant-footer {
    width: 56.5vw;
    display: flex;
    flex-direction: column;
    // left: 26vw;
    margin: 0 auto;
    padding: 10px 30px;
    background: #ffffff;
    box-shadow: 0px 4px 12px rgba(92, 178, 255, 0.2);
    z-index: 100;
    border-radius: 14px;
    position: relative;
    // 上传图片缩略图

    .fileUpload {
      position: absolute;
      width: 346px;
      height: 90px;
      display: flex;
      top: -90px;
      left: 0;
      z-index: 200;

      .select {
        width: 116px;
        height: 82px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0px 4px 12px 0px rgba(92, 178, 255, 0.2);
        padding: 17px;
        color: #333;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 8px;

        div {
          display: flex;
          align-items: center;

          img {
            width: 16px;
            height: 16px;
            margin-right: 7px;
          }
        }

        div:hover {
          cursor: pointer;
        }
      }

      .tips {
        width: 226px;
        height: 69px;
        margin-bottom: 20px;
        position: relative;

        img {
          width: 226px;
          height: 69px;
        }

        p {
          position: absolute;
          top: 10px;
          right: 10px;
          color: #fff;
          font-family: "PingFang SC";
          font-size: 12px;
          width: 198px;
          height: 49px;
        }
      }
    }

    .recommendIcon {
      position: absolute;
      width: 86px;
      height: 28px;
      top: -100px;
      right: 0;

      div {
        position: relative;
      }

      img {
        position: absolute;
        top: -32px;
        left: 11px;
        width: 29px;
        height: 35px;
      }

      span {
        display: block;
        width: 100%;
        height: 28px;
        border-radius: 15px;
        background: #5cb2ff;
        color: #fff;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
      }

      span:hover {
        cursor: pointer;
      }
    }

    .option-area {
      display: flex;
      font-size: 18px;

      .other-opt {
        align-self: center;
        display: flex;
        width: 20px;
        margin-top: 15px;
      }

      .other-opt:hover {
        cursor: pointer;
      }

      .input-box {
        position: relative;
        position: relative;
        padding-left: 10px;
        margin-left: 10px;
        flex: 1;
      }

      .other-yuyin {
        display: flex;
        width: 50px;
        margin-left: 20px;

        &.type2:hover {
          cursor: pointer;
        }
      }
    }

    .area-con {
      display: flex;
      width: 100%;
      padding: 20px 0;
      border-top: 1px solid #f5f5f5;

      .van-row {
        width: 100%;
        justify-content: center;
      }

      .area-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: v-bind("themeColor.textColorLighten");
        font-size: 24px;

        img {
          width: 86px;
          margin-bottom: 10px;
          border: 1px dashed v-bind("themeColor.borderColorLighten");
        }
      }
    }

    .ver {
      position: absolute;
      bottom: 103%;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      font-size: 20px;
      color: #4c4c4c;
      opacity: 0.5;
    }
  }

  .warn {
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    text-align: center;
    margin-top: 36px;
    color: #999;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

.feedback-box {
  .title {
    font-size: 16px;
  }

  .sub {
    width: 94%;
    display: flex;
    flex-direction: row-reverse;
    margin: 10px 30px 0;
  }
}
</style>
<style lang="scss">
.assistant-container {
  .assistant-footer {
    .van-cell-group {
      background: none;
    }

    .van-cell {
      padding: 0;
    }

    .van-field {
      line-height: 24px;
      background: none;

      .van-field__control {
        font-size: 18px;
        color: #999;
      }

      &.textareaellipsis {
        .van-field__control {
          height: 24px !important;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 100%;
        }
      }

      &.textareaellipsis:selection {
        .van-field__control {
          height: 24px !important;
        }
      }
    }

    .van-cell-group--inset {
      margin: 0;
    }
  }
}

.reco-box {
  left: 0.64rem !important;
  top: 288px !important;
  width: 50%;

  .recommend-box {
    padding: 30px;
    position: relative;
    z-index: 2;
    border-radius: 20px;
    background: #1196DB0D;

    background: #1196DB0D;
    box-shadow: 0px 0px 20px #007deb;

    .recommend {
      overflow: hidden;

      .nav-tab {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin: 10px 0;

        .nav-item {
          font-size: 28px;
          font-weight: 500;
          letter-spacing: 0px;
          line-height: 38px;
          color: rgba(255, 255, 255, 0.5);
          text-align: left;
          vertical-align: top;
          position: relative;

          .item-text {
            position: relative;
            z-index: 2;
          }

          &.active {
            color: #fff;

            &::after {
              content: "";
              display: block;
              position: absolute;
              // background: linear-gradient(153.12deg,
              //     rgba(92, 178, 255, 1) 17.78%,
              //     rgba(255, 177, 177, 1) 100%);
              height: 8px;
              width: 100%;
              bottom: 2px;
              z-index: 1;
            }
          }
        }
      }

      .refresh {
        font-size: 28px;
        color: #ffffff;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin-top: 30px;
        gap: 10px;
      }

      .list {
        display: flex;
        width: 100%;
        flex-direction: column;
        color: v-bind("themeColor.textColor");

        .desc {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .robot {
          display: flex;
          align-items: center;
          gap: 18px;
          color: rgba(255, 255, 255, 0.5);

          span {
            font-size: 28px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 26.8px;
            color: rgba(255, 255, 255, 0.5);
          }

          .shu {
            width: 1px;
            height: 100%;
            background: #ffffff;
            height: 38px;
          }

          .dailyrecommendations {
            display: flex;
            flex-direction: column;
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0px;
            color: #ffffff;
            font-weight: bold;
          }

          img {
            width: 50px;
            height: auto;
          }
        }

        .list-item {
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          width: 100%;
          background: rgba(255, 255, 255, 0.25);
          padding: 24px 32px 22px 26px;
          border-radius: 24px;

          span {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 28px;
            color: #fff;

            b {
              display: flex;
              width: 10px;
              height: 10px;
              background: #ffffff;
              margin-right: 16px;
              border-radius: 50%;
              flex-shrink: 0;
            }

            &.arrow {
              span {
                color: v-bind("themeColor.borderColor");
              }
            }
          }
        }
      }
    }
  }
}

.reco-box .van-popover__arrow {
  color: #5cb2ff !important;
}

.assistant-footer .van-popover__wrapper,
.loading-robat {
  display: inline-block;
  position: absolute;
  left: 1%;
  top: -94px;
}

.loading-robat {
  top: -114px;
}

.file-item a {
  color: #5cb2ff;
}

.con-text ref {
  color: #999;
}

.con-text p {
  margin-bottom: 16px;
  margin-top: 0;

  a {
    color: #5cb2ff;
  }
}

.con-text ul li+li {
  margin-top: 10px;
}

.feedback-box {
  .title {
    top: var(--van-popup-close-icon-margin);
    font-size: 28px;
    position: absolute;
  }

  .feedback-content {
    font-size: 24px;
    margin-top: 40px;
    padding-top: var(--van-popup-close-icon-margin);
    color: #888;

    .feedback-textarea {
      background: #f5f5f5;
      margin-top: 20px;
    }

    .feedback-back {
      margin-top: 20px;
      float: right;
    }
  }
}

.like-box {
  box-shadow: none;
  background: rgba(136, 136, 136, 1) !important;
  // box-shadow: 0px 0px 4px  rgba(92, 178, 255, 0.6)!important;
  // filter: drop-shadow(0px 0px 4px rgba(136, 136, 136, 1)) !important;
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 34px;
  border-radius: 8px;
  position: relative;

  .van-popover__content {
    background: initial;
    box-shadow: initial;
  }

  .sanj {
    width: 20px;
    height: 30px;
    position: absolute;
    left: 50px;
    top: -10px;
  }

  .close {
    font-size: 28px;
    position: absolute;
    top: 4px;
    right: 8px;
    color: rgba(255, 255, 255, 1);
  }


  p {
    padding: 38px 28px 14px 28px;
    box-sizing: border-box;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 40px;
  }

  .van-popover__arrow {
    color: rgba(255, 255, 255, 0.6);
  }

  .sanj::before {
    content: "";
    border: 4rpx solid rgba($color: #888888, $alpha: 1);
    background: #888888;
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(60deg);
    transform-origin: left top;
    box-sizing: border-box;
    border-radius: 8rpx;
  }
}

.demo-rate-block {
  font-size: 14px;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}

.demo-rate-block:last-child {
  border-right: none;
}

.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
}

.el-textarea__inner {
  color: #000;
}

.el-inptextarea__innerut::placeholder {
  color: #999;
}

.assistant-footer {
  .el-textarea__inner {
    margin-top: 8px;
    padding-right: 2px;
    box-shadow: none;
    color: #000;
    font-family: "PingFang SC";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
  }

  .el-inptextarea__innerut::placeholder {
    color: #999;
  }

  .el-textarea__inner:hover {
    box-shadow: none;
  }

  .el-textarea__inner:focus {
    box-shadow: none;
  }

  .el-textarea.is-disabled .el-textarea__inner {
    cursor: auto !important;
    box-shadow: none;
    background: none;
  }
}

.el-message--warning {
  font-size: 18px !important;
}

.el-message--error {
  font-size: 18px !important;
}

.el-message--success {
  font-size: 18px !important;
}

.el-message {
  font-size: 18px !important;
}

#textarea-box {
  overflow-y: hidden;
  /* 允许文本换行 */
  white-space: pre-wrap;
  word-wrap: break-word;
}

.deepseek-wecome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  bottom: 0;
  padding: 0 66px;
  text-align: center;

  svg {
    width: 80px;
  }

  span {
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 26px;
  }

  p {
    font-size: 20px;
    color: #999;
  }
}

.el-switch--large {
  height: 32px;
  margin-right: 20px;
  display: flex !important;
  align-items: center;
}

.el-switch--large .el-switch__core {
  height: 100%;
  border-radius: 30px;
}

.el-switch--large .el-switch__label {
  height: auto;
}

.assistant-footer-box {
  div {
    padding: 12px 36px;
    opacity: 1;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(51, 51, 51, 100);
    text-align: center;
    vertical-align: top;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    height: 28px;
    margin-right: 10px;
    padding: 0 7px;
    display: flex;
    float: left;
    margin-top: 10px;
    border: 1px solid #F5F5F5;
  }

  div.sen-active {
    background: rgba(92, 178, 255, 0.25);
    color: rgba(92, 178, 255, 1);
    border: 1px solid rgba(92, 178, 255, 1);
  }
}

.con-text .think-style {
  color: #999;
  margin-bottom: 20px;
  padding-left: 20px;

  border-left: 1px solid #ddd;
  font-size: 16px
}

.deepbox .el-message-box__title {
  color: #000;
  font-weight: bold;
  font-size: 22px;
}

.deepbox .desc {
  font-size: 18px;
  text-align: center;
}

.deepbox .el-message-box__btns {
  margin-top: 10px;

  button {
    width: 30%;
  }
}

.versions {
  background-color: rgba(92, 178, 255, 0.15);
  display: flex;
  width: 100px;
  text-align: center;
  padding: 7px 2px;
  display: flex;
  margin: 0 10px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
}
</style>
